Question

我有这个CSS：

-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";

翻转并将图像颠倒过来。我想要的只是当它翻转90°时停止的图像，因此它是不可见的。

这有可能吗？

Answer 1

如果您需要将图像翻转90度以使其变得不可见，那么您应该使用rotate(90deg)变换（在这种情况下为rotateX(90deg)），如下面的代码段所示。

我不确定你何时会让元素变得不可见（如:hover，点击等），但是如果你在:hover上看不到它，那么就把:hover选择器打开容器元素而不是图像本身。这是因为一旦图像悬停并且由于旋转而变得不可见，那么鼠标指针在技术上不再在图像上（换句话说，hover不再适用）。这意味着图像会立即自动恢复到原始状态。

＆＃13;

div {
  border: 1px solid #777;
  height: 100px;
  width: 200px;
}
img {
  transition: all 1s;
}
div:hover img {
  transform: rotateX(90deg);
}

＆＃13;

<div>
  <img src="http://lorempixel.com/200/100/nature/1" />
</div>

＆＃13;

另一方面，如果您坚持使用scaleY()转换来实现此效果，那么您必须按顺序使用scaleY(0)才能使元素不可见。 scaleY(-1)将始终以-180deg结束，并且无法在中间停止此操作。

＆＃13;

div {
  border: 1px solid #777;
  height: 100px;
  width: 200px;
}
img {
  transition: all 1s;
}
div:hover img {
  transform: scaleY(0);
}

＆＃13;

<div>
  <img src="http://lorempixel.com/200/100/nature/1" />
</div>

＆＃13;

Answer 2

http://davidwalsh.name/demo/css-flip.php

看看David Walsh的演示：）

我认为垂直翻转更有趣

只需将.front和.back @：hover更改为90deg即可获得所需的结果！

翻转图像并以特定角度停止

2 个答案: