使用CSS水平/垂直翻转/镜像图像 [英] Flip / mirror an image horizontally + vertically with css
问题描述
我正在尝试翻转图像以4种方式显示:原始(无变化),水平翻转,垂直翻转,水平+垂直翻转.
Im trying to flip an image to display it 4 ways : original (no changes), flipped horizontally, flipped vertically, flipped horizontally + verticly.
要执行此操作,请执行以下操作,除了水平+垂直翻转之外,它还可以正常工作,知道为什么它不起作用吗?
To do this Im doing the below, it works fine apart from the flip horizontally + vertically, any idea why this wouldnt be working ?
我在这里做了一个JS小提琴: https://jsfiddle.net/7vg2tn83/
Ive made a JS fiddle of the issue here : 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";
}
推荐答案
尝试一下:
.img-hor-vert {
-moz-transform: scale(-1, -1);
-o-transform: scale(-1, -1);
-webkit-transform: scale(-1, -1);
transform: scale(-1, -1);
}
更新的小提琴: https://jsfiddle.net/7vg2tn83/1/
以前没有用,因为您要覆盖CSS中的transform
.因此,它没有执行全部操作,而是执行了最后一个操作.就像您两次background-color
一样,它将覆盖第一个.
It wasn't working before because you were overriding the transform
in your css. So instead of doing both, it just did the last one. Sort of like if you did background-color
twice, it would override the first one.
这篇关于使用CSS水平/垂直翻转/镜像图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!