CSS3详解:transform [旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix]

CSS3详解:transform [旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix]

transform的属性包括:rotate() / skew() / scale() / translate(x,y) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。

下面我们来分解各个属性的用法:

1.旋转 rotate():

水平旋转,属性值格式为Xdeg。(deg是“度”的意思)rotate(Xdeg)。X为正数时,顺时针旋转;为负数时,逆时针旋转

.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

改变元素基点transform-origin

————————————————————————————

2.扭曲 transform:skew():

将元素沿水平方向倾斜变形。skew(Xdeg,Ydeg)。这个比较难表述,想象一下平行四边形吧。属性值为一个时,x、y轴参数相同;为两个时,x、y轴各自倾斜。

.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

————————————————————————————

3.缩放 scale():

缩放,1为原始大小。scale(x)。正数放大,负数缩小。属性值为一个时,x/y轴同时缩放;属性值为两个值时,分别控制x、y轴的缩放。

.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

————————————————————————————

4.位移 translate(x,y):

定位元素,基于XY轴重新定位元素。translate(Xpx,Ypx)。属性值为一个时,x、y轴参数相同;为两个时,x、y轴分别定位

.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

5.矩阵matrix

matrix(<number>, <number>, <number>, <number>, <number>, <number>) : 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵,我在这里只是简单的说一下CSS3中的transform有这么一个属性值,如果有感兴趣的朋友可以去了解更深层次的martix使用方法,这里就不多说了。

————————————————————————————

6.transform综合应用:

transform的常用属性就是这些了,下面我们借助transition的帮忙来演示一个关于css3 transform的综合实例:

.demo_transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}
.demo_transform5:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)}

示例代码:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>实例: CSS3详解:transform</title>
<link rel='stylesheet' href='http://www.daqianduan.com/static/css/example.css' type='text/css' media='all' />
</head>
<body>

<div class="demo-container demo">

<style type="text/css">
.demo{
	width: 300px;clear: both;padding:30px 20px;text-align:left;margin:0 auto;line-height: 18px;
}
.transform{margin:30px 0 80px 0;width:200px;height:50px;font-size:18px;font-weight:bold;background:#DEE4EE;color:#305999;text-align:center;line-height:50px}
.transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}
.transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}
.transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}
.transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}
.transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}
.transform5:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0)}
</style>
<div class="transform transform1">transform</div>
<div class="transform transform2">transform</div>
<div class="transform transform3">transform</div>
<div class="transform transform4">transform</div>
<div class="transform transform5">transform</div>

</div>
<div style="display:none"></div>
</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注