transform:rotate3d/tranlate3d

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平移的距离

 

转载于:https://www.cnblogs.com/yangqing22/p/6589694.html