transform属性详解

这一章，我准备详细介绍下 transform 这个属性。

我们先来看看其兼容性，

Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

所以，对于一些对浏览器兼容性有要求的网站来说，大多数属性都是不能用到的。

Opera 只支持 2D 转换。

好，接下来我们一个个的看其属性

div{
  width: 100px;
  height: 100px;
  background: red;
}

一、2D、3D转换

(1) matrix(n,n,n,n,n,n) // 定义 2D 转换，使用六个值的矩阵

div{
  width: 100px;
  height: 100px;
  background: red;
  transform: matrix(0.586,0.8,-0.8,0.586,40,10);
  -ms-transform: matrix(0.586,0.8,-0.8,0.586,40,10);
  -webkit-transform: matrix(0.586,0.8,-0.8,0.586,40,10);
}

(2) matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。

(3) translate(x, y)

.div2{
  width: 100px;
  height: 100px;
  background: red;
  transform: translate(50px, 50px);
  -ms-transform: translate(50px, 50px);
  -webkit-transform: translate(50px, 50px);
}

(4) translate3d(x,y,z) 定义 3D 转换

(5) translateX(x) 定义转换，只是用 X 轴的值

(6) translateY(y) 定义转换，只是用 Y 轴的值

(7) translateZ(z) 定义 3D 转换，只是用 Z 轴的值

二、2D、3D缩放

(1) scale(x, y) 定义 2D 缩放转换

  width: 100px;
  height: 100px;
  background: red;
  transform: scale(1.1,1.2);
  -mos-transform: scale(1.1,1.2);
  -webkit-transform: scale(1.1,1.2);

(2) scale3d(x, y, z) 定义 3D 缩放转换

(3) scaleX(x) 通过设置 X 轴的值来定义缩放转换

(4) scaleY(y) 通过设置 Y 轴的值来定义缩放转换

(5) scaleZ(z) 通过摄这是 Z 轴的值来定义 3D 缩放转换

三、旋转

(1) rotate(angle) 定义 2D 旋转，在参数中规定角度

.div2{
  width: 100px;
  height: 200px;
  background: red;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

(2) rotate3d(x,y,z,angle) 定义 3D 旋转

(3) rotateX(angle) 定义沿着 X 轴的 3D 旋转

(4) rotateY(angle) 定义沿着 Y 轴的 3D 旋转

(5) rotateZ(angle) 定义沿着 Z 轴的 3D 旋转

四、倾斜转换

(1) skew(10deg, 10deg) 定义沿着 X 和 Y 轴的 2D 倾斜转换。

.div2{
  width: 100px;
  height: 200px;
  background: red;
  transform: skew(10deg, 10deg);
  -ms-transform: skew(10deg, 10deg);
  -webkit-transform: skew(10deg, 10deg);
}

(2) skewX(10deg) 定义沿着 X 轴的 2D 倾斜转换

(3) skewY(10deg) 定义沿着 Y 轴的 2D 倾斜转换

五、perspective(n): 为 3D 转换元素定义透视视图。