CSS3 元素的变形（transform）

最新推荐文章于 2024-07-26 09:56:47 发布

wlwc0627

最新推荐文章于 2024-07-26 09:56:47 发布

阅读量6.3k

点赞数 1

文章标签： box css3 布局

本文链接：https://blog.csdn.net/actorWen/article/details/78797822

版权

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);
}