我试图翻转图像以显示4种方式:原始(无变化),水平翻转,垂直翻转,水平+垂直翻转。
为了做到这一点,我在下面做,除了水平+垂直翻转之外,它还可以正常工作,你知道为什么它不起作用吗?
.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); }
以前没有用,因为您transform在CSS中覆盖了。因此,它没有执行全部操作,而是执行了最后一个操作。有点像如果您执行background-color两次,它将覆盖第一个。
transform
background-color