CSS变形transform

1 认识transform

2012年10月，W3C组织发布了CSS3变形工作草案，这个草案包括了CSS3 2D变形和CSS3 3D变形。在CSS3之前都需要依赖图片、Flash或JavaScript才能完成。现在，使用CSS3就可以实现这些变形效果：
1、无需加载额外的文件
2、提高了网页开发者的工作效率
3、提高了页面的执行速度

2 2D转换

2.1 transform用法

CSS3的变形（transform）属性可以让元素在一个坐标系统中变形。

基本语法格式：transform：none | transform-functions;

transform属性的默认值为none，适用于内联元素和块元素，表示不进行变形。transform-function用于设置变形函数，可以是一个或多个变形函数列表。

2.2 变形函数transform-function

2.2.1 matrix()定义矩形变换

matrix()基于X和Y坐标重新定位元素的位置，以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵。

格式为：

transform: matrix(a, b, c, d, e, f);

其中，六个参数默认值是matrix(1, 0, 0, 1, 0, 0)，这六个参数分别控制不同的变换：a：水平缩放、b：水平拉伸、c：垂直拉伸、d：垂直缩放、e：水平位移、f：垂直位移

例如，HTML文件中代码如下：

<div class="div1"></div>

CSS样式如下：

.div1{
    width: 100px;
    height: 100px;
    background-color: pink;
    transform: matrix(0, 1, 1, 1, 30, 20);
}

2.2.2 translate()移动元素对象

translate()基于X和Y坐标重新定位元素，第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0。当值为负数时，表示反方向移动元素。

格式为：

transform: translate(x, y);

也可以使用translateX()和translateY()来设置基于X轴或者基于Y轴的移动，但是二者不能同时使用。
translateX()：指定对象X轴（水平方向）的平移
translateY()：指定对象Y轴（垂直方向）的平移

格式为：

transform: translateX(移动距离);
transform: translateY(移动距离);

例如，HTML文件中代码如下：

<div class="div1"></div>

CSS样式如下：

.div1 {
    width: 100px;
    height: 100px;
    background-color: blue;
    transform: translate(200px, 100px);
}

该蓝色方块距离上方100像素，距离左边200像素。

2.2.3 scale()缩放元素对象

scale()可以使任意元素对象尺寸发生变化，取值包括正数、负数和小数。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值。若是负数，先反转对象，然后缩放。

格式为：

transform: scale(x, y);

例如，HTML文件中代码如下：

<div class="div1"></div>
<div class="div2"></div>

CSS样式如下：

.div1 {
    width: 100px;
    height: 100px;
    background-color: blue;
    /*缩放该div*/
    transform: scale(0.5, 0.8);
}
.div2 {/*未被缩放的div*/
    width: 100px;
    height: 100px;
    background-color: pink;
}

2.2.4 rotate()旋转元素对象

rotate()旋转元素对象，取值为一个度数值。如果角度为正数值，则按照顺时针进行旋转，否则，按照逆时针旋转。角度单位：deg。

格式为：

transform: rotate(xdeg);/*x是数字*/

例如，HTML文件中代码如下：

<div class="div1"></div>

CSS样式如下：

.div1 {
    width: 200px;
    height: 100px;
    background-color: blue;
    /*顺时针旋转35度*/
    transform: rotate(35deg);
}

2.2.5 skew()倾斜元素对象

skew()倾斜元素对象，取值为度数值。第一个参数表示相对于X轴进行倾斜，第二个参数表示相对于Y轴进行倾斜，如果省略了第二个参数，则取默认值0。角度单位：deg。

格式为：

transform: skew(x, y);

倾斜示意图：

例如，HTML文件中代码如下：

<div class="div1"></div>

CSS样式如下：

.div1 {
    width: 100px;
    height: 100px;
    background-color: blue;
    transform: skew(15deg, 20deg);
}

2.3 transform-origin中心点

变形操作都是以元素的中心点为基准进行的，如果需要改变这个中心点，可以使用transform-origin属性。transform-origin属性包含三个参数，其默认值分别为50%，50%，0。

格式：

transform-origin: x y z;

其中，x定义视图被置于X轴的何处。可能的值有：left、center、right、length、%；y定义视图被置于Y轴的何处。可能的值有：top、center、bottom、length、%；z定义视图被置于Z轴的何处。可能的值有：length。

例如，HTML文件中代码如下：

<div class="div1"></div>

初始CSS样式如下：

.div1 {
    width: 100px;
    height: 100px;
    background-color: red;
    transform: rotate(45deg);
}

更改中心点的CSS样式如下：

.div1 {
    width: 100px;
    height: 100px;
    background-color: red;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

3 3D转换

3.1 rotateX()指定元素围绕X轴旋转

rotateX()函数用于指定元素围绕X轴旋转。

格式为：

transform: rotateX(a);

参数a用于定义旋转的角度值，单位为deg，其值可以是正数也可以是负数。如果值为正，元素将围绕X轴顺时针旋转；反之，如果值为负，元素围绕X轴逆时针旋转。

3.2 rotateY()指定元素围绕Y轴旋转

rotateY()函数指定一个元素围绕Y轴旋转。

格式为：

transform: rotateY(a);

参数a用于定义旋转的角度。如果值为正，元素围绕Y轴顺时针旋转；反之，如果值为负，元素围绕Y轴逆时针旋转。