时间戳

首页 > 解决方案 > 使用 3d css 变换旋转对象时，如何保持方向不变，即“越过顶部”而不是向后

css - 使用 3d css 变换旋转对象时，如何保持方向不变，即“越过顶部”而不是向后

问题描述

当应用带有过渡动画的 3D 变换时，有没有办法从高角度向前旋转到低角度，这样我就可以通过向前移动 20 度而不是向后移动 340 度来从 350 度旋转到 10 度。

标签： css

解决方案

我做了一个快速测试，它似乎适用于负值:)

(源)

div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -webkit-transform: rotateY(40deg); /* Safari prior 9.0 */
  transform: rotateY(40deg); /* Standard syntax */
  transition: all 0.3s;
}

#myDiv:hover {
  transition: all 0.3s;
  -webkit-transform: rotateY(-30deg); /* Safari prior 9.0 */
  transform: rotateY(-30deg); /* Standard syntax */
}
<div id="myDiv">
40 to -30deg rotated element.
</div>

推荐阅读