CSS3 元素的变形(transform)

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

变形效果。

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

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

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

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

transform的语法:transform:none|<transform-functions>;

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

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

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

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

自身以及其他元素的布局

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

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

注:对元素进行2D旋转时,需要先设置其transform-origin属性;

2.transform-origin:用于定义变形圆点的位置。其语法为:transform-origin:<x-axis> <y-axis>;

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

或长度值。

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

值、长度值。

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

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

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

例1:旋转的菜单



注:此时设置的旋转原点是(50%,0),即是上边界水平位置上的中点。

步骤如下:

1.先设置最基本的样式,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style type="text/css">
*{margin: 0;padding: 0;}
div{
width: 400px;
height: 50px;
text-align: center;
margin: 100px auto;
line-height: 50px;
}
div ul li{
width: 100px;
height: 50px;
list-style: none;
float:left;
}
div ul li:first-child{
background-color: #e3e;
}

div ul li:nth-child(2){
background-color: #33e;
}
div ul li:nth-child(3){
background-color: #390;
}
div ul li:last-child{
background-color: #d55;
}
</style>
</head>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
</div>
</body>
</html>

可以得到如下的样式:


然后设置其旋转原点:

代码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(<x>,<y>)

其参数说明如下:

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

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

<x>、<y>的值可以为整数、负数、小数。

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

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

当取值为负数时,元素会被翻转;

如果省略<y>值,则说明水平方向上的缩放倍数

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

例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(<angleX>,<angleY>);

参数说明如下:

<angleX>:表示元素在空间x轴上的倾斜程度;

<angleY>:表示元素在空间y轴上的倾斜程度;

<angleX>、<angleaY>的值为带有角度单位标识符的数值,角度单位是

deg。值为正数时,表示顺时针旋转;值为负数时,表示逆时针旋转。

如果<angleY>的值省略,则说明垂直方向上的倾斜角度默认为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(<dx>,<dy>);

参数说明如下:

<dx>:表示元素在水平方向上的偏移距离;

<dy>:表示元素在竖直方向上的偏移距离;

<dx><dy>的值为带有长度单位标识符的数值,可以为负值和带小数的值。

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

或向上偏移。若<dy>的值省略,则说明垂直方向上的偏移距离为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); 
}


展开阅读全文

没有更多推荐了,返回首页