Sunday, February 9, 2014

Multiple CSS Transforms on single element

I wanted to rotate an element in CSS and also wanted to mirror it. I thought of flipping the element, wrapping it with another div and then rotating the div. I found that I could do this in a single step by applying multiple transforms on a single element. Here's the syntax (vendor prefixed):

transform:rotate(-45deg) scale(-1, 1);
-ms-transform:rotate(-45deg) scale(-1, 1);
-webkit-transform:rotate(-45deg) scale(-1, 1);

Similarly, you can combine multiple css transformations. Got suggestions/improvements? Do comment below.