CSS3转换：rotate（）和rotateY（）不能一起工作

Question

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

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

y轴与div一起旋转，使我的尝试失败。

所以问题是，有没有办法在旋转元素后重置y轴的角度（可能使用额外的父元素和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);
}

为什么这是必要的是复杂的，可能超出了这个答案的范围，但足以说三维编程和绘图的历史使程序员期望你在这里看到的行为......那样多个连续的变换可以有可预测的，统一的结果。如果浏览器不是相对于DOM元素是直线的，或者你使用SVG绘制了一个romboid形状（风筝等），你可以根据需要旋转它，转换方向从一个角落到另一个角落。 / p>

Answer 2

变换的顺序与看似直观的相反。解释为什么有点太长，但试试这个：

.test {
    position: absolute;
    width: 100px;
    height: 200px;
    left: 50px;
    top: 100px;
    background-color: lightblue;
    -webkit-animation: rotate 3s infinite linear;
    animation: rotate 3s infinite linear;
}

@-webkit-keyframes  rotate {
    0% { -webkit-transform: rotateY(0deg) rotate(-35deg)}
  100% { -webkit-transform: rotateY(360deg) rotate(-35deg)}
}

@keyframes  rotate {
    0% { transform: rotateY(0deg) rotate(-35deg)}
  100% { transform: rotateY(360deg) rotate(-35deg)}
}

我旋转-35度然后旋转Y，将其设置为0到360（从右到左读取变换）。

demo