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 get a rounded corner table with a body in different color with CSS?

    How to add style to the parent when radio button is selected

    How do I apply a CSS to a clutter stage?

    How can i override the margin: 0; padding: 0; border: 0; css styles from main body css for ul li

    How to apply css background color to text only, in datatables cell

    How to prevent text style defaults during CSS transition

    How to override priority in CSS classes?

    How to achieve a lightbox effect with css only? Example available

    How to set caption for youtube videos box in css?

    How do browsers process and apply CSS styles to DOM elements?

    how to deselect a css style using javascript?

    css: Image is on the border of parent's div. How to make text above that image in a div?

    How to use font-face with cssless?

    How to do Vertical+Horizontal centering in CSS

    How to animate CSS resize?

    how to get fixed table columns width

    How to draw rotated element as backgorund in HTML

    How to keep CSS from render-blocking my website?

    how to use css inheritance for button colors

    How do I make my webpage scale-able depending on the size of the browser window?

    CSS / JS: How do I tell my page to be completely unselectable, except for stuff inside a div?

    How to position an element relative to the background image width

    How to override a 's CSS when loaded by ajax?

    How to show html template using inline styles only?

    How do you stretch header, content & footer color across a page with everything being centered in a fixed width?

    How to force CSS3 slideshow animation to display in correct order?

    How do I change the last textual node child in JavaScript

    How to provide responsive design for svg?

    How to adjust the position of specific elements/items/content on a page with CSS

    How do I make a line break between divs inside a box?