我有这个CSS：
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
翻转，图像倒置。我想要的只是图像在翻转90°后停止播放，因此它是不可见的。
有可能吗？
如果您需要将图像翻转90度以使其不可见，则应使用以下代码段rotate(90deg)（rotateX(90deg)在这种情况下）进行转换（在这种情况下）。
我不确定何时使该元素不可见（例如:hover，单击等），但是如果使它不可见，:hover则将:hover选择器放在容器元素上而不是图像本身上。这是因为一旦图像悬停并由于旋转而变得不可见，则鼠标指针在技术上不再位于图像上方（换句话说，hover不再适用）。这意味着图像会立即自动恢复为原始状态。
div {
border: 1px solid #777;
height: 100px;
width: 200px;
}
img {
transition: all 1s;
}
div:hover img {
transform: rotateX(90deg);
}<div>
<img src="http://lorempixel.com/200/100/nature/1" />
</div>另一方面，如果您坚持使用scaleY()transform来实现此效果，则必须按scaleY(0)顺序使用以使元素不可见。scaleY(-1)总是会在-180度结束，并且没有办法在中间停止它。
div {
border: 1px solid #777;
height: 100px;
width: 200px;
}
img {
transition: all 1s;
}
div:hover img {
transform: scaleY(0);
}<div>
<img src="http://lorempixel.com/200/100/nature/1" />
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句