transform:rotate3d(x,y,z,angle);
rotate3d 代表 在3D空间，元素沿着 经过原点(0,0,0) 和 三维坐标(x,y,z) 2点的直线进行旋转。其中：
- x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
- y：是一个0到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
- z：是一个0到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
- angle：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
衍生 3个属性分别为:
- rotateX(angle)
指定沿著 x 軸根據指定角度的順時針方向旋轉。
相当于 rotate(1,0,0,angle); - rotateY(angle)
指定沿著 y 軸根據指定角度的順時針方向旋轉。
相当于 rotate(0,1,0,angle); - rotateZ(angle)
指定沿著 z 軸根據指定角度的順時針方向旋轉。
相当于 rotate(0,0,1,angle);
@keyframes huang {
20% {
-webkit-transform: rotate3d(0,0,1,15deg);
transform: rotate3d(0,0,1,15deg);
}
40% {
-webkit-transform: rotate3d(0,0,1,-10deg);
transform: rotate3d(0,0,1,-10deg);
}
60% {
-webkit-transform: rotate3d(0,0,1,5deg);
transform: rotate3d(0,0,1,5deg);
}
80% {
-webkit-transform: rotate3d(0,0,1,-5deg);
transform: rotate3d(0,0,1,-5deg);
}
100% {
-webkit-transform: rotate3d(0,0,1,0deg);
transform: rotate3d(0,0,1,0deg);
}
}
transform:translate3d(x,y,z) x,y,z平移的距离