如何使用 CSS 旋转 + 翻转元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17015568/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to rotate + flip element with CSS
提问by chinabuffet
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 属性可以让你旋转或翻转，但你怎么能同时做到呢？假设我想将一个元素旋转 90 度并水平翻转它？两者都是用相同的属性完成的，所以后者覆盖了前者。为方便起见，这是一个示例小提琴：
transform: rotate(90deg);
transform: scaleX(-1);
回答by James Green
I fiddled with jsfiddle, and this worked:
我摆弄了 jsfiddle，这奏效了：
$('#photo').css('transform', 'rotate(90deg) scaleX(-1)');
To relate it to your question, the resulting CSS looks like
为了将它与您的问题相关联，生成的 CSS 看起来像
transform: rotate(90deg) scaleX(-1);
回答by Austin Brunkhorst
The properties can be delimited by spaces, like so.
属性可以用空格分隔，就像这样。
transform: rotate(90deg) scaleX(-1);
回答by Kaan Soral
For future generations, a more complete answer:
对于后代，一个更完整的答案：
.rotate2{ /*leaning left <- */
-webkit-transform:rotate(270deg);
-moz-transform:rotate(270deg);
-o-transform:rotate(270deg);
-ms-transform:rotate(270deg);
transform:rotate(270deg);
}
.rotate4{ /*upside down*/
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
transform:rotate(180deg);
}
.rotate6{ /*leaning right -> */
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}
.rotate8{ /*vertical flip*/ /*upside-down mirror*/
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}
.rotate10{ /*vertical flip*/ /*upside-down*/
-moz-transform: rotate(90deg) scale(1, -1);
-webkit-transform: rotate(90deg) scale(1, -1);
-o-transform: rotate(90deg) scale(1, -1);
-ms-transform: rotate(90deg) scale(1, -1);
transform: rotate(90deg) scale(1, -1);
}
.rotate12{ /*horizontal flip*/ /*left-right mirror*/
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.rotate14{ /*horizontal flip*/ /*left-right mirror*/
-moz-transform: rotate(90deg) scale(-1, 1);
-webkit-transform: rotate(90deg) scale(-1, 1);
-o-transform: rotate(90deg) scale(-1, 1);
-ms-transform: rotate(90deg) scale(-1, 1);
transform: rotate(90deg) scale(-1, 1);
}
回答by Owaiz Yusufi
Have a look at this:
看看这个：
element {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
for more info here is the link: https://css-tricks.com/snippets/css/flip-an-image/
有关更多信息，请访问以下链接：https: //css-tricks.com/snippets/css/flip-an-image/
