翻转图像并停在某个角度

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

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

看看伟大的 David Walsh 的这个演示 :)

我觉得垂直翻转对你来说更有趣

只需将 .front 和 .back @ :hover 更改为 90 度即可获得您想要的结果！

Answer 2

如果您需要将图像翻转 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() 转换来实现此效果，则您将不得不使用 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>

翻转图像并停在某个角度

Flip image and stop at a certain angle

css

css-transforms