Html 使用css水平+垂直翻转/镜像图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32875695/
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
Flip / mirror an image horizontally + vertically with css
提问by sam
Im trying to flip an image to display it 4 ways : original (no changes), flipped horizontally, flipped vertically, flipped horizontally + verticly.
我试图翻转图像以 4 种方式显示它：原始（无变化）、水平翻转、垂直翻转、水平 + 垂直翻转。
To do this Im doing the below, it works fine apart from the flip horizontally + vertically, any idea why this wouldnt be working ?
要做到这一点，我在下面做，除了水平+垂直翻转外，它工作正常，知道为什么这不起作用吗？
Ive made a JS fiddle of the issue here : https://jsfiddle.net/7vg2tn83/
我在这里做了一个关于这个问题的 JS 小提琴：https: //jsfiddle.net/7vg2tn83/
.img-hor {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.img-vert {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
.img-hor-vert {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
回答by pgruber
Try this:
尝试这个：
.img-hor-vert {
-moz-transform: scale(-1, -1);
-o-transform: scale(-1, -1);
-webkit-transform: scale(-1, -1);
transform: scale(-1, -1);
}
Updated fiddle: https://jsfiddle.net/7vg2tn83/1/
更新小提琴：https: //jsfiddle.net/7vg2tn83/1/
It wasn't working before because you were overriding the transformin your css. So instead of doing both, it just did the last one. Sort of like if you did background-colortwice, it would override the first one.
它以前不起作用，因为您覆盖了transformcss 中的 。所以它没有做这两个，而是做了最后一个。有点像如果你做了background-color两次，它会覆盖第一个。
回答by Frank Rem
You may do a transform: rotate(180deg);for the horizontal+vertical flip.
您可以transform: rotate(180deg);为水平+垂直翻转做一个。
回答by Edmond Weiss
To perform a reflection you can use, the transform CSS property along with the rotate() CSS function in this format:
要执行反射，您可以使用以下格式的 transform CSS 属性和 rotate() CSS 函数：
transform: rotateX() rotateY();
The function rotateX() will rotate an element along the x-axis and the function rotateY() will rotate an element along the y-axis. I find my approach intuitive in that one can visualize the rotation mentally. In your example, the solution using my approach would be:
函数rotateX() 将沿x 轴旋转元素，函数rotateY() 将沿y 轴旋转元素。我发现我的方法很直观，因为可以在心理上想象旋转。在您的示例中，使用我的方法的解决方案是：
.img-hor {
transform: rotateY(180deg); // Rotate 180 degrees along the y-axis
}
.img-vert {
transform: rotateX(180deg); // Rotate 180 degrees along the x-axis
}
.img-hor-vert {
transform: rotateX(180deg) rotateY(180deg); // Rotate 180 degrees on both
}
The JS fiddle to demonstrate the solution is https://jsfiddle.net/n20196us/1/
演示解决方案的 JS 小提琴是https://jsfiddle.net/n20196us/1/
回答by Victor
You can apply only a single transform rule for any selector. Use
您只能为任何选择器应用单个转换规则。用
.img-hor-vert {
-moz-transform: scaleX(-1) scaleY(-1);
-o-transform: scaleX(-1) scaleY(-1);
-webkit-transform: scaleX(-1) scaleY(-1);
transform: scaleX(-1) scaleY(-1);
filter: FlipH FlipV;
-ms-filter: "FlipH FlipV";
}
I am unsure which IE will accept multiple filters though.
我不确定哪个 IE 会接受多个过滤器。
