在CSS 3.0中，可以通过transformCSS属性对HTML元素执行2D转换。在编写Safari for Windows时，需要-webkit-transformCSS属性来执行CSS转换。我们可以执行的转换是：

• 旋转
• 转换
• 比例缩放
• 偏斜
• 矩阵

这些转换的每一个都将在本文的其余部分中介绍。实际上，这些转换与可以在SVG元素上执行的SVG转换非常相似。很高兴知道这两种选择都存在。

旋转（Rotate）

旋转变换使围绕某个点旋转HTML元素成为可能。这是一个将div元素绕其中心旋转45度的示例：

<style>
    #div1 {
        width : 200px;
        height: 200px;
        background-color: #ff0000;
        -webkit-transform : rotate(45deg);
        transform         : rotate(45deg);
    }
</style>

<div id="div1"></div>

这是应用了这些样式的div元素的外观：

"旋转"转换采用单个参数，该参数是旋转HTML元素的度数。我们可以同时使用正数和负数。

我们可以使用transform-originCSS属性来更改HTML元素旋转的点。

转换（Translate）

CSS转换" translate"将给定的HTML元素沿X和Y方向移动。这是一个CSStranslate示例：

<style>
    #div2 {
        width: 100px;
        height: 100px;
        background-color: #ff0000;
        -webkit-transform : translate(25px, 25px);
        transform         : translate(25px, 25px);
    }
</style>

<div id="div2"></div>

这个例子将'div'元素沿X和Y轴平移25个像素。这是两个宽度和高度相同的div元素，其中第二个元素应用了上述转换：

如我们所见，第二个HTML元素与没有翻译的位置相比被移动了。

比例缩放（Scale）

"缩放"转换功能可以按比例放大和缩小HTML元素。 scale属性有两个参数：在X和Y方向上缩放的比例。这是一个CSSscale示例：

<style>
    #div4 {
        width: 100px;
        height: 100px;
        background-color: #00ff00;
    }
    #div5 {
        width: 100px;
        height: 100px;
        background-color: #ff0000;
        -webkit-transform : scale(2.0, 2.0);
        transform         : scale(2.0, 2.0);
    }
</style>

<div id="div4">Div 1</div>
<div id="div5">Div 2</div>

这个例子沿着X和Y轴将第二个div元素缩放2. 这是应用了上述样式的两个HTML元素：

第1分部

第2分部

如我们所见，缩放比例也适用于div元素内的文本。缩放的不仅是HTML元素的尺寸。我们还已经注意到缩放是使用HTML元素的中心作为转换原点执行的(稍后说明)。这使缩放后的HTML元素在其原始位置的左侧和右侧都延伸。

lt;

偏斜（Skew）

"偏斜"变换使X和Y轴偏斜给定的度数。 "偏斜"变换采用两个参数：X和Y度。这是一个"偏斜"转换示例：

<style>
    #div7 {
        width: 100px;
        height: 100px;
        background-color: #ff0000;
        -webkit-transform : skew(25deg, 0deg);
        transform         : skew(25deg, 0deg);
    }
</style>
<div id="div7">Div 2</div>

这是应用了这些样式的div元素的外观：

本示例将X轴倾斜25度，将Y轴倾斜0度。

矩阵（Matrix）

"矩阵"转换可以根据矩阵转换HTML元素。矩阵如下所示：

a  c  e
b  d  f
0  0  1

"矩阵"转换总共需要6个参数。这些参数是上面矩阵中的a，b，c，d，e和f值。这是一个例子：

#div8{
    -webkit-transform: matrix(a,b,c,d,e,f);
    transform        : matrix(a,b,c,d,e,f);
}

其他CSS转换函数都可以表示为矩阵。这里有些例子：

Translate

1  0  tx
0  1  ty
0  0   1

matrix(1,0,0,1,tx,ty);

Rotate

cos(a)   -sin(a)  0
sin(a)    cos(a)  0
     0        0   1

matrix( cos(a), sin(a),-sin(a),cos(a),0,0 );

注意：cos(a)和sin(a)的值在插入矩阵之前必须预先计算。所得参数a是旋转角度。

Scale

sx  0  0
 0 sy  0
 0  0  1

matrix(sx,0,0,sy,0,0);

沿x轴的偏斜变换可以写为：

Skew

1  tan(a)  0
0       1  0
0       0  1

matrix(1,0,tan(a),1,0,0);

tan(a)值必须在插入matrix()函数之前进行预先计算。

沿y轴的偏斜变换可表示为：

Skew

1       0  0
tan(a)  1  0
0       0  1

matrix(1,tan(a),0,1,0,0)

转换源CSS属性

" transform-origin" CSS属性指定了转换发生的时间点。 " transform-origin" CSS属性采用两个值：" length"和" height" CSS属性。这是一个CSStransform-origin示例：

<style>
    #div1 {
        transform-origin: 0 0;
    }
</style>

<div id="div1"></div>

本示例将转换原点设置为" 0,0"，这表示HTML元素的左上角。我们还可以指定百分比。这是一个使用百分比的transform-origin示例：

<style>
    #div1 {
        transform-origin: 25% 25%;
    }
</style>

<div id="div1"></div>

本示例将转换原点设置为距离HTML元素左边缘25％和顶部边缘25％的点。

我们还可以使用一组关键字作为"长度"和"高度"值。这些是：

• top
• bottom
• left
• right
• center

这些关键字指的是HTML元素的顶部，底部，左侧或者右侧，或者HTML元素的中心。

" transform-origin" CSS属性通常与" rotate"转换结合使用，以设置围绕其旋转给定HTML元素的点。

结合转换

我们可以通过指定要执行的多个转换来组合CSS转换。我们可以通过在transformCSS属性值中以空格分隔功能来实现此目的。这是一个例子：

#div1 {
    transform: rotate(25deg)  translate(100px, 25px);
}

本示例首先将给定的HTML元素旋转25度，然后将其沿X轴平移(移动)100像素，并沿Y轴平移(移动)25像素。