CSS3转换:rotate()和rotateY()不能一起工作

Question

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

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

y轴与div一起旋转,使我的尝试失败.

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

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 绘制了长形形状（风筝等），则可以根据需要旋转它，变换方向从一个角到另一个角。