CSS3基础认识CSS3元素2D转换(位移/变形/旋转/倾斜)

认识CSS3元素2D转换(位移/变形/旋转/倾斜)

CSS3的2D转换函数可以实现元素改变形状、尺寸和位置等样式,本文简单的认识一下CSS3中的2D转换函数:

1. translate() 方法

通过translate()方法,元素从其当前位置移动,根据给定的left(x 坐标)和top(y 坐标)位置参数,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
div {
 margin:30px;padding:20px;
 width:300px;height:100px;
 background:#439799;
 color:#fff;
}
div#a2 {transform:translate(60px,10px);}
</style>
</head>
<body>
<div id="a1">United States of America</div>
<div id="a2">United States of America</div>
</body>
</html>

给第二个div设置了以上属性,发现这个div产生了移动,属性定义的两个值分别表示把元素从左侧移动60像素,从顶端移动10像素。

2D1.png

2. rotate() 方法

通过rotate()方法,元素顺时针旋转指定的角度,角度如果设置为负值,则元素将逆时针旋转,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
div {
 margin:30px;padding:20px;
 width:300px;height:100px;
 background:#439799;
 color:#fff;
}
div#a2 {transform:rotate(45deg);}
</style>
</head>
<body>
<div id="a1">United States of America</div>
<div id="a2">United States of America</div>
</body>
</html>

给第二个div设置了以上属性,发现这个div产生了旋转,属性定义的角度值表示旋转的角度。

2D2.png

3. scale() 方法

通过scale()方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
div {
 margin:30px;padding:20px;
 width:300px;height:100px;
 background:#439799;
 color:#fff;
}
div#a2 {transform:scale(0.5,1.2);}
</style>
</head>
<body>
<div id="a1">United States of America</div>
<div id="a2">United States of America</div>
</body>
</html>

我们给第二个div设置了以上属性,发现这个div的尺寸发生了变化,宽度变成了之前的0.5倍,高度变成了之前的1.2倍。

2D3.png

4. skew() 方法

通过skew()方法,元素倾斜给定的角度,根据给定的水平线(X轴)和垂直线(Y轴)参数,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
div {
 margin:30px;padding:20px;
 width:300px;height:100px;
 background:#439799;
 color:#fff;
}
div#a2 {transform:skew(10deg,20deg);}
</style>
</head>
<body>
<div id="a1">United States of America</div>
<div id="a2">United States of America</div>
</body>
</html>

给第二个div设置了以上属性,发现这个div产生了斜切的效果,属性定义的两个值表示元素相对X轴把元素倾斜了10度,相对Y轴倾斜了20度。

2D4.png

5. matrix() 方法

通过matrix()方法把所有2D转换方法组合在一起,需要六个参数,包含数学函数,允许旋转、缩放、移动以及倾斜元素,即transform:matrix(a,b,c,d,e,f) ……

任意点(x,y,1)经过matrix变化为(ax+cy+e,bx+dy+f,1)

位移(translate),缩放(scale),倾斜(skew)和旋转(rotate)这四个2D变换方法分别对应:

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

scale(sx,sy)matrix(sx,0,0,sy,0,0)

skew(sx,sy)matrix(1,tansy,tansx,1,0,0)

rotate(rx)matrix(cosrx,sinrx,-sinrx,cosrx,0,0)

以上的所有变换效果均是相对于元素默认的坐标位置进行的改变,CSS3中的transform-origin属性允许您改变被转换元素的坐标,该属性定义方法是:

transform-origin:x-axis y-axis z-axis;

该属性的默认值是坐标原点:“50% 50% 0”……

x-axis这个值定义视图被置于X轴的位置,可设置为:left、center、right、具体数值或百分比;

y-axis这个值定义视图被置于Y轴的何处,可设置为:top、center、bottom、具体数值或百分比;

z-axis这个值定义视图被置于Z轴的何处,可设置为具体的数值。

关于transform-origin的详细用法请点击《使用transform-origin属性改变元素变换原点》这篇文章。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cjjcqxm.cn/css3/29.html