CSS3–transform 变形金刚

原文地址：http://missdora.net/blog/2010-05/css3-transform

transform可以对元素进行角度旋转和缩放,请使用webkit内核最新版浏览器浏览该文章以保证CSS3效果能够完全呈现

有五种变形样式，可以重叠多种变形样式，以空格分隔

• scale:缩放，1为原始大小。scale(x)。正数放大，负数缩小。属性值为一个时，x/y轴同时缩放；属性值为两个值时，分别控制x、y轴的缩放。
• rotate:水平旋转，属性值格式为Xdeg。rotate(Xdeg)。X为正数时，顺时针旋转；为负数时，逆时针旋转
• translate:定位元素，基于XY轴重新定位元素。translate(Xpx,Ypx)。属性值为一个时，x、y轴参数相同；为两个时，x、y轴分别定位
• skew:将元素沿水平方向倾斜变形。skew(Xdeg,Ydeg)。这个比较难表述，想象一下平行四边形吧。属性值为一个时，x、y轴参数相同；为两个时，x、y轴各自倾斜。
• matrix:矩阵，六个值。矩阵变形（学习完毕之后更新）

浏览器支持情况:-webkit-transform,-moz-transform,-o-transform,目前对CSS3动画支持的最好最全面的是webkit内核浏览器。

在设置了transform属性后，可以设置transform-origin属性，这个属性控制变形时的源点，也就是变形时围绕的点。这个属性接受两个参数，可以是百分比、top/center/bottom、带单位的数值。

示例1:scale

scale, hover me

.scale{height:50px;width:100px;background:red;-webkit-transition:all .5s ease;}
.scale:hover{-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-o-transform:scale(1.5);}

scale with origin, hover me

.scale:hover{
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);}
.origin{-webkit-transform-origin:top center;}
/*设定了变换源点，下面几个例子中也有设定了变幻源点后的示例*/

示例2:rotate

rotate, hover me

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

rotate with origin, hover me

示例3:translate

translate, hover me

.translate:hover{
-webkit-transform:translate(10px,-10px);
-moz-transform:translate(10px,-10px);
-o-transform:translate(10px,-10px);}

translate with origin, hover me

示例4:skew

skew, hover me

.skew:hover{
-webkit-transform:skew(20deg,-10deg);
-moz-transform:skew(20deg,-10deg);
-o-transform:skew(20deg,-10deg);}

skew with origin, hover me

示例5:matrix

matrix, hover me

.matrix:hover{
-webkit-transform:matrix(1, -0.2, 0, 1, 0, 0);
-moz-transform:matrix(1, -0.2, 0, 1, 0, 0);
-o-transform:matrix(1, -0.2, 0, 1, 0, 0);}