css3transform rotate,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(, , , , , ) ： 以一个含六值的(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)}

示例代码：

实例: CSS3详解：transform

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

transform

transform

transform

transform

transform