CSS3变换
CSS3转换让你平移，旋转，缩放和倾斜的元素。
转换是让一个元素改变形状，大小和位置的影响。
CSS3支持2D和3D转换。
将鼠标悬停在下面的内容看2D和3D变换之间的区别：
二维变换浏览器支持
在表中的数字规定，完全支持该属性的第一个浏览器版本。
数字其次-ms-, -webkit-, -moz- ，或-o- specify以一个前缀工作的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| transform | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
| transform-origin (two-value syntax) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
CSS3 2D变换
在本章中，您将了解以下2D转换方法：
-
translate() -
rotate() -
scale() -
skewX() -
skewY() -
matrix()
 | 提示：您将了解在下一章3D转换。 |
|---|
该translate()方法
的translate()方法（根据用于X轴和Y轴给出的参数）从其当前位置移动的元件。
下面的示例中移动<div>元素50像素的权利，以及100像素下从当前位置：
例
div
{
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}
试一试» 在rotate()方法
的rotate()方法根据给定程度的元件顺时针或逆时针旋转。
以下示例将旋转<div> 20度顺时针元素：
例
div
{
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
试一试» 使用负值将逆时针旋转元素。
下面的例子中，旋转<div>元素逆时针旋转20度：
例
div
{
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}
试一试» 该scale()方法
的scale()方法增加或减少（根据为宽度和高度给出的参数）的元件的尺寸。
下面的例子中增加<div>元素是其原始宽度的两倍，并且其原始高度的三倍：
例
div
{
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3);
}
试一试» 下面的例子降低<div>元素是原来的一半宽度和高度：
例
div
{
-ms-transform: scale(0.5,0.5); /* IE 9 */
-webkit-transform: scale(0.5,0.5); /* Safari */
transform: scale(0.5,0.5);
}
试一试» 该skewX()方法
所述skewX()方法偏斜沿由预定角度的X轴的元件。
下面的例子将歪斜<div>元素沿X轴20度：
例
div
{
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}
试一试» 该skewY()方法
所述skewY()方法偏斜沿着由给定的角度沿Y轴的元件。
下面的例子将歪斜<div>元素沿Y轴20度：
例
div
{
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}
试一试» 该skew()方法
的skew()方法偏斜沿X和Y轴由给定的角度的元件。
下面的例子偏斜的<div>元件沿X轴20度，并且沿着Y轴10度：
例
div
{
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
试一试» 如果未指定所述第二参数，它有一个零值。 所以，下面的例子将歪斜<div>元素沿X轴20度：
例
div
{
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}
试一试» 该matrix()方法
该matrix()方法结合了所有的2D转换方法为一体。
该matrix()方法取六个参数，包括数学函数，它允许你旋转，缩放，移动（翻译），和倾斜的元素。
参数如下： matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
例
div
{
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
试一试» 自测练习用！
CSS3转换属性
下表列出了所有的2D转换属性：
| 属性 | 描述 |
|---|---|
| transform | 适用的2D或3D变换到一个元素 |
| transform-origin | 允许你改变转化元素位置 |
2D变换方法
| 功能 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定义一个2D变换，使用六个值的矩阵 |
| translate(x,y) | 定义一个2D翻译，移动沿着X和Y轴的元件 |
| translateX(n) | 定义一个2D翻译，移动沿着X轴的元件 |
| translateY(n) | 定义一个2D翻译，移动沿Y轴的元件 |
| scale(x,y) | 定义一个2D缩放转换，改变元素的宽度和高度 |
| scaleX(n) | 定义一个2D缩放转换，改变元素的宽度 |
| scaleY(n) | 定义一个2D缩放转换，改变元素的高度 |
| rotate(angle) | 限定了二维旋转，该角度在参数指定 |
| skew(x-angle,y-angle) | 限定沿X和Y轴的2D歪斜变换 |
| skewX(angle) | 限定沿X轴的二维倾斜转换 |
| skewY(angle) | 限定沿Y轴的2D歪斜变换 |