How to rotate + flip element with CSS

css css-transforms
chinabuffet picture chinabuffet · Jun 10, 2013 · Viewed 50.9k times · Source

The transform property lets you rotate or flip, but how can you do both at the same time? Say I want to rotate an element 90 degrees and flip it horizontally? Both are done with the same property, so the latter overwrites the former. Here's an example fiddle for convenience:

http://jsfiddle.net/DtNh6/

transform: rotate(90deg);
transform: scaleX(-1);

Answer

James Green picture James Green · Jun 10, 2013

I fiddled with jsfiddle, and this worked:

$('#photo').css('transform', 'rotate(90deg) scaleX(-1)');

To relate it to your question, the resulting CSS looks like

transform: rotate(90deg) scaleX(-1);

Related questions

How to apply multiple transforms in CSS?

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); }

Read More
Prevent flicker on webkit-transition of webkit-transform

Possible Duplicate: iphone webkit css animations cause flicker For some reason, right before my animation of the webkit-transform property occurs, there is a slight flicker. Here is what I am doing: CSS: #element { -webkit-transition: -webkit-transform 500ms; } JavaScript: $("#element").css("-webkit-transform", "…

Read More
Spin or rotate an image on hover

I want to find out how to make a spinning or rotating image when it is hovered. I would like to know how to emulate that functionality with CSS on the following code :

Read More