CSS3的变换类型（transform）

1、简介

CSS3的变换（transform）属性的作用：

• 构建一些CSS2中难以构造的图形，可以把一些过去由Photoshop作得工作交给浏览器渲染本身。
• 配合JavaScript制作更为丰富的动画。

transform的兼容性：

• IE10、Firefox、Opera支持transform属性。
• IE9支持替代的-ms-transform属性（仅适用于2D转换）。
• Safari和Chrome支持替代的-webkit-transform属性（3D和2D转换）。
• Opera只支持2D转换。

2、rotate旋转变换

transform属性有很多选项，rotate是比较常用的一种，rotate在CSS3中用于元素的旋转。
示例：

div{
	transform: rotate(10deg);
}

在这个相关的示例中为rotate传入一个角度值作为参数，元素将沿中轴线顺时针偏转这个角度。

当要使元素沿着x轴方向旋转可以使用rotateX(角度值)。

当要使元素沿着y轴方向旋转可以使用rotateY(角度值)。

注意：rotateZ等效于rotate。

如果需要在其他向量上应用旋转，可以使用rotate3d(x, y, z, deg)，编辑x、y、z的值构建三维向量，最后一个参数使偏转的角度。
示例：

div{
	transform: rotate3d(1, -1, 0, 10deg);
}

3、skew扭曲变换

transform的skew属性用于设置元素的扭曲变形，例如：

transform: skew(30deg, 10deg);

上述代码表示原图形在x轴方向上偏转30°，在y轴方向上偏转10°。

可以使用skewX()、skewY()表示单一方向上的skew变换。

注意：skew没有3D和skewZ选项。

4、scale比例缩放

scale在transform中用于尺寸缩放的控制。
例如：

div{
	transform: scale(1.1, 1.1);
}

该段代码表示在原尺寸的基础上横向、纵向都放大到原来的1.1倍。

注意：可以使用scaleX()、scaleY()、scaleZ()做单一方向上的缩放，不过元素内的图片、文字等也会被拉伸，造成失真的情况。

5、translate位移变换

transform中的属性translate参数定义了元素的位移。
示例：

div{
	transform: translate(10px, 20px);
}

该段示例表示元素在x轴方向上向右移动10像素，在y轴方向上向下移动20像素。

可以使用translateX()、translateY()、translateZ()来表示单一方向上的位移。

6、总结

transform属性用于元素的变换操作，常用的选项为：

• 旋转：使用rotate选项，支持3D。
• 扭曲：使用skew选项，不支持3D。
• 缩放：使用scale选项，支持3D。
• 位移：使用translate选项，支持3D。