如何使用CSS旋转+翻转元素 [英] How to rotate + flip element with CSS

问题描述

transform属性使您可以旋转或翻转，但是如何同时进行呢?假设我想将元素旋转90度并水平翻转?两者都具有相同的属性，因此后者会覆盖前者.为了方便起见，下面是一个小提琴示例:

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

推荐答案

我摆弄了jsfiddle，这行得通:

I fiddled with jsfiddle, and this worked:

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

将其与您的问题相关联，生成的CSS看起来像

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

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

这篇关于如何使用CSS旋转+翻转元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！