CSS3 元素的变形（transform）

CSS3新增了transform属性，可用于元素的变形，实现元素的旋转、缩放、移动、倾斜等

变形效果。

transform基于webkit内核的替代私有属性是-webkit-transforn;

  基于gecko内核的替代私有属性是-moz-transform;

  基于presto内核的替代私有属性是-o-transform;

  基于IE浏览器的替代私有属性是-ms-transform;

transform的语法：transform:none|;

none:默认值，不设置元素变形。

:设置一个或多个变形函数。变形函数包括旋转rotate()、缩放scale()

、移动translate()、倾斜skew()、矩阵变形matrix()等。设置多个变形函数时，用空格间隔。

元素在变形过程中，仅元素的显示效果变形，实际尺寸并不会因为变形而改变，即不会影响

自身以及其他元素的布局。

1.旋转rotate()：定义在元素在二维空间的旋转，其使用的语法是：rotate()，angle表示

旋转的角度，角度单位是deg。是正数时，表示顺时针旋转，反之则是逆时针旋转。

注：对元素进行2D旋转时，需要先设置其transform-origin属性；

2.transform-origin:用于定义变形圆点的位置。其语法为：transform-origin: ;

:定义变形原点的横坐标位置，默认值是50%，取值包括left、center、right、百分比值

或长度值。

:定义变形原点的纵坐标位置，默认值是50%，取值包括top、middle、bottom、百分比

值、长度值。

其中，百分比是相对于元素对象的宽度和高度而言，而该位置是以元素的左上角为坐标圆点进行计算的。

基于不同内核有不同的替代私有属性，替代私有属性可参考上面3-6行的代码。

如例1所示：rotate()的变形效果

例1：旋转的菜单

注：此时设置的旋转原点是（50%，0），即是上边界水平位置上的中点。

步骤如下：

1.先设置最基本的样式，代码如下：

• HTML


• CSS


• JavaScript


• jQuery

可以得到如下的样式：

然后设置其旋转原点：

代码1：

div ul li:first-child{
background-color: #e3e;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
}

然后设置其变形样式：

代码2：

transform:rotate(30deg); 
-o-transform:rotate(30deg); 
-moz-transform:rotate(30deg); 
-webkit-transform:rotate(30deg); 

将代码2添加到代码1中，即可得到如图所示的变形效果

2.旋转和缩放scale():用于定义元素在二维空间的缩放和旋转。

scale()语法：scale(,)

其参数说明如下：

:表示元素在水平方向上的缩放倍数

:表示元素在垂直方向上的缩放倍数

、的值可以为整数、负数、小数。

当取值的绝对值大于1时表示放大；

当绝对值小于1时表示缩小；

当取值为负数时，元素会被翻转；

如果省略值，则说明水平方向上的缩放倍数

与水平方向上的缩放倍数相同。

例2：为CSS元素设置放大效果

未设置放大效果时，其效果图如下：

当设置如下的效果时：

div ul li:nth-child(2){
background-color: #33e;
transform: scale(2,2);
-webkit-transform:scale(2,2);
-moz-transform:scale(2,2);
-o-transform:scale(2,2);
}

其效果如下所示：

3.倾斜效果skew():用于定义函数在二维空间的倾斜变形。

skew()语法：skew(,);

参数说明如下：

:表示元素在空间x轴上的倾斜程度；

Y>:表示元素在空间y轴上的倾斜程度；

、的值为带有角度单位标识符的数值，角度单位是

deg。值为正数时，表示顺时针旋转；值为负数时，表示逆时针旋转。

如果的值省略，则说明垂直方向上的倾斜角度默认为0deg。

例3：为script标签添加倾斜效果：

script标签的水平和数值方向上添加30度的旋转，其效果图如下所示：

代码如下：

div ul li:nth-child(3){
background-color: #390;
transform: skew(30deg,30deg);
-webkit-transform:skew(30deg,30deg);
-moz-transform:skew(30deg,30deg);
-o-transform:skew(30deg,30deg);
}

4.移动translate():用于定义元素在二维空间的偏移。

translate()函数的语法：translate(,);

参数说明如下：

:表示元素在水平方向上的偏移距离；

y>:表示元素在竖直方向上的偏移距离；

y>的值为带有长度单位标识符的数值，可以为负值和带小数的值。

若取值大于0，则表示向右或向下偏移；若取值小于0，则表示向左

或向上偏移。若的值省略，则说明垂直方向上的偏移距离为0。

例4：移动jQuery标签的位置

将jQuery标签的位置向右平移50px,向上平移60px的效果图如下所示：

代码如下：

div ul li:last-child{
background-color: #d55;
transform:translate(50px,-60px); 
-o-transform:translate(50px,-60px); 
-moz-transform:translate(50px,-60px); 
-webkit-transform:translate(50px,-60px); 
}