我试图翻转一个图像显示它4种方式：原始(无变化),水平翻转,垂直翻转,垂直翻转.
要做到这一点,我做下面的工作,除了水平垂直的翻转,工作正常,任何想法为什么这不会工作？
我在这里做了一个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";
}
解决方法
尝试这个：
.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中的变换.所以,而不是做这两个,它只是做了最后一个.如果你做了背景颜色两次,就会覆盖第一个.
