在css3

Question

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

rotate(x, y, z, adeg)

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

Answer 1

transform: rotate3d(x,y,z, angle)

rotate3d围绕矢量轴旋转对象。这就是（x，y，z）的用途。它们确定对象将围绕其旋转的向量。 （3轴上矢量的协调）

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

这三个值之间的关系对于设置矢量很重要。例如，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>