css动画-transform

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

一、transform属性--2D位置移动

1.translate(x,y)

定义：基于原来的位置，沿X轴平移，长度为x，沿Y轴平移，长度为y

    transform：translate(x,y);     

2.translateX(x)

定义：基于原来的位置，沿X轴平移，长度为x

 transform：translateX(x);  

3.translateY(y)

定义：基于原来的位置,沿Y轴平移，长度为y

 transform：translateY(y); 

二、transform属性--3D位置移动

1.translate3d(x,y,z)

定义：基于原来的位置,沿X轴平移，长度为x,沿Y轴平移，长度为y,沿Z轴平移，长度为z

transform：translate3d(x,y,z); 

2.translateZ(z)

定义：基于原来的位置,沿Z轴平移，长度为z

transform：translateZ(z);

三、transform属性---2D缩放转换

1.scale(x,y)
定义：基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数，y代表沿Y轴的伸缩倍数

transform：scale(x,y);

2.scaleX(x)

定义：基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数

transform：scale(x);

3.scaleY(y)

定义：基于原来的位置进行伸缩变换，其中y代表沿Y轴的伸缩倍数

transform：scale(y);

四、transform属性---3D缩放转换

1.scale3d(x,y,z)
定义：基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数，y代表沿Y轴的伸缩倍数，z代表沿Z轴的伸缩倍数

transform：scale3d(x,y,z);

2.scaleZ(z)
定义：基于原来的位置进行伸缩变换，其中z代表沿Z轴的伸缩倍数

transform：scaleZ(z);

五、transform属性---2D旋转

1.rotate(angle)
定义：以图形的几何中心点为旋转中心，顺时针旋转角度为angle

transform：rotate(angle);

2.rotateX(x)

定义：绕X轴方向旋转，顺时针旋转角度为angle

transform：rotateX(x);

3.rotateZ(z)
定义：绕Y轴方向旋转，顺时针旋转角度为angle

transform：rotateZ(z);

六、transform属性---3D旋转

1.rotate3d(x,y,z,angle)
定义：同时绕X,Y,Z轴三个方向旋转，顺时针旋转角度为angle

transform：rotate3d(x,y,z,angle);

2.rotateZ(z)
定义：绕Z轴方向旋转，顺时针旋转角度为angle

transform：rotateZ(z);