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>