css3How to rotate + flip element with CSS

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:


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

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

The properties can be delimited by spaces, like so.

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

Related Articles
You Might Also Like