CSS3中transform属性详解

兼容性

• Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 10、Firefox、Opera 支持 transform 属性。
• Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
• Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
  由此可见没特殊要求兼容性还是可以的。

translate：平移

• 单位： px

transform: translate(50px, 50px); // 实例

• 语法：

(1) translate(x, y) // 普通用法
(2) translateX(x) // 定义转换，只是用 X 轴的值
(3) translateY(y) // 定义转换，只是用 Y 轴的值
(4) translateZ(z) // 定义 3D 转换，只是用 Z 轴的值
(5) translate3d(x,y,z) // 定义 3D 转换

• 方向：

   以笔记本打开90°为参考坐标系：
   X轴正方向：屏幕从左向右
   Y轴正方向：屏幕从上向下
   Z轴正方向：垂直屏幕从外
  

x： 正值------------X轴正方向
y： 正值------------y轴正方向
z： 正值------------z轴正方向

rotate：旋转

• 单位： deg

transform: rotate(90deg); // 实例

• 语法：

(1) rotate(angle) // 定义 2D 旋转，在参数中规定角度
(2) rotate3d(x,y,z,angle) // 定义 3D 旋转 **需要配合 transform-style:preserve-3d;
(3) rotateX(angle) // 定义沿着 X 轴的 3D 旋转
(4) rotateY(angle) // 定义沿着 Y 轴的 3D 旋转
(5) rotateZ(angle) // 定义沿着 Z 轴的 3D 旋转

• 方向：

   以笔记本打开90°为参考坐标系：
   X轴正方向：屏幕从左向右
   Y轴正方向：屏幕从上向下
   Z轴正方向：垂直屏幕从外
  

x： 正值------------X轴正方向
y： 正值------------y轴正方向
z： 正值------------z轴正方向

scale：缩放

• 单位： 数字

transform: scale(1.2, 1.2); // 实例

• 语法：

(1) scale(x, y) // 定义 2D 缩放转换
(2) scale3d(x, y, z) // 定义 3D 缩放转换 // 定义 3D 旋转 **需要配合 transform-style:preserve-3d;
(3) scaleX(x) // 通过设置 X 轴的值来定义缩放转换
(4) scaleY(y) // 通过设置 Y 轴的值来定义缩放转换
(5) scaleZ(z) // 通过摄这是 Z 轴的值来定义 3D 缩放转换

• 方向：

   以笔记本打开90°为参考坐标系：
   X轴正方向：屏幕从左向右
   Y轴正方向：屏幕从上向下
   Z轴正方向：垂直屏幕从外
  

x： 正值------------X轴正方向
y： 正值------------y轴正方向
z： 正值------------z轴正方向

注意：perspective(n): 为 3D 转换元素定义透视视图。