How to apply multiple transforms in CSS?


Tags: css,css3,transform

Problem :

Using CSS, how can I apply more than one transform?

Example: In the following, only the translation is applied, not the rotation.

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}


Solution :

You have to put them on one line like this:

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

When you have multiple transform directives, only the last one will be applied. It's like any other CSS attribute.


    CSS Howto..

    How to style HTML paragraphs with CSS to prevent empty lines between them?

    how to toggle image in HTML-CSS? [duplicate]

    With HTML and CSS, how to have an image that is vertically aligned with a horizontal line?

    How can I better regulate BootStrap's width styling from scaling down elements at specific width sizes?

    How to achieve layout goal - Two Column

    How to apply CSS to a DialogBox using ClientBundle?

    How to draw a responsive shape [closed]

    How to reflect updates to CSS at runtime in Visual Studio 2012?

    How to edit ol tags in rich text editor

    How do I differentiate between two different images in the same class in my CSS file

    How to change background-color of selected option in IE11?

    how to get true css property names from CSSStyleDeclaration object?

    In CSS, how to select a particular tag under mutiple ids?

    How to get content of particular column of html page after split using css-rule(-webkit-column-width:)

    How to set a max-width only to text nodes not in a tag?

    How to persist CSS changes with Chrome Developer Tools

    How to make background image position stay same on all resolutions?

    How to make pagination's circle of slider using CSS only?

    jQuery addClass based on how far scrolled

    how to prevent child element from widening parent element's width in css

    CSHTML - How to I make the unordered list items horizontal?

    Inheriting CSS how do I stop it?

    How to make a CSS rule act differently inside another div tag?

    How do I add colored corners to a background image?

    How to make background scale from center outwards with CSS transition

    How to write variable with multiple css properties in Sass

    How do I get text to go in the middle of a div? [duplicate]

    How to addClass() at RANDOM to an element in jQuery?

    How do we change the color and size of dingbat unicode characters in mobile Safari? (html entities)

    CSS accordion menu - How to expand and hyperlink