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轴上面的倾斜角度,也可以单独设置某轴上的倾斜角度

原文地址:https://www.cnblogs.com/xiaozhou223/p/11180323.html