CSS3--transform相关属性

---transform属性使用---

1、过度时间 ：transition: transform 2s;

2、transform： 应用 2D 或 3D 转换。可以对元素进行旋转、缩放、移动或倾斜。

　　（1）2D 转换：transform: matrix(a,a,a,a,x,y);——>abcd二维矩阵、xy表示坐标

　　（2） 3D 转换：transform: matrix3d(a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a);16值矩阵

　　（3）2D 转换：transform: translate(x,y); 在xy轴移动指定像素，translateY(y)、translateX(x)

　　（4）3D 转换：transform: translate3d(x,y,z);

　　（5）2D 缩放：transform: scale(x,y)：xy——>在xy轴上面的缩放量，xy用数字，xy为1没变化；可单独操作：scaleY(y)，scaleX(x)

　　（6）3D缩放：transform:scale3d(x,y,z); xyz——>在xyz轴上面的缩放量，xyz均为数值

　　（7）2D旋转：transform: rotate(angle);  angle为旋转的度数，单位为deg，例如旋转90度：90deg；

　　（8）3D旋转：transform:rotate3d(x,y,z,angle);  rotateX/Y/Z(angle)沿着 X/Y/Z轴的 3D 旋转

　　（9）2D倾斜：skew(x-angle,y-angle); 在XY轴上面的倾斜角度，也可以单独设置某轴上的倾斜角度