css - 在 css3 中使用 3D 旋转

Question

旋转的三个参数是什么？
很多资源都描述了第四个参数(例如:enter link description here，但对前三个参数的描述不多:

rotate(x, y, z, adeg)

第四个出现所有轴的 Angular ，然后是前三个，某种标量因子，它们的最大值是多少？这些实现了什么？

Answer 1

变换:rotate3d(x,y,z, angle)

rotate3d 围绕矢量轴旋转对象。这就是 (x,y,z) 的用途。他们确定对象将围绕其旋转的矢量。 (向量在 3 个轴上的坐标)

你还应该知道 3d 中的 Y 轴是倒转的，这意味着它的正值在轴的下方而不是在 2d 中向上

这 3 个值之间的关系对于设置向量很重要。例如 rotate3d(1,-1,1,60deg) 给出与 rotate3d(100, -100, 100, 60deg) 相同的结果或更清楚: rotate3d(1,-5,8,60deg) 与 rotate3d(10,-50,80,60deg)

相同

div {

  width:100px;
  height:100px;
  background:red;
  margin:50px;
}
.first {
    transform: rotate3d(1, -1, 1, 60deg);
}
.second {
     transform: rotate3d(100, -100, 100, 60deg);
}

<div>

</div>
<div class="first">

</div>
<div class="second">

</div>