CSS3 变换 : rotate() and rotateY() not working together

Question

我有一个简单的 div，我想先将它旋转 -35 度，然后让它绕 y 轴旋转。

然而，通过使用 transform: rotate(-35deg) rotateY(180deg);，我真正得到的是这样的:

y 轴随 div 旋转，使我的尝试失败。

所以问题是，有没有办法在我旋转元素后重置 y 轴的 Angular (可能使用额外的父元素和 transform-origin？)，以获得结果我想要？

Answer 1

是的，尽管它需要使用容器 div。考虑将一个 div 放在一个 div 中:

<div class="outer">
  <div class="inner"></div>
</div>

然后将 Z 变换(第一个)应用于内部 div:

.inner{
   transformZ(Ndeg);
}

并且您的 Y 变换到容器 div，其 Y 轴未被 Z 旋转变换

.outer {
   transformY(Ndeg);
}

为什么这是必要的很复杂，可能超出了这个答案的范围，但足以说明 3d 编程和绘图的历史导致程序员期望您在这里看到的行为......这样多个连续的转换可以具有可预测的、统一的结果。如果浏览器相对于 DOM 元素不是直线的，或者如果您使用 SVG 绘制了一个长方形(风筝等)，您可以根据需要旋转它，变换方向从一个 Angular 到另一个 Angular 。