transform:rotate3d/tranlate3d

时间：2017-03-20 16:29:12 阅读：159 评论：0 收藏：0 [点我收藏+]

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

transform:rotate3d/tranlate3d

原文：http://www.cnblogs.com/yangqing22/p/6589694.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)