transform使用参考指南
2010-09-18 16:06:33| 分类： html5+css3|字号 订阅
transform ：none | <transform-function>[ <transform-function> ]*
指定一个身份转变
应用于block水平和inline水平的元素。
transform可以对元素进行角度旋转和缩放,请使用webkit内核最新版浏览器浏览该文章以保证CSS3效果能够完全呈现
在设置了transform属性后，可以设置transform-origin属性，这个属性控制变形时的源点，也就是变形时围绕的点。这个属性接受两个参数，可以是百分比、top/center/bottom、带单位的数值。
transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。
有五种变形样式，可以重叠多种变形样式，以空格分隔
1.scale：缩放，1为原始大小。scale(x)。正数放大，负数缩小。属性值为一个时，x/y轴同时缩放；属性值为两个值时，分别控制x、y轴的缩放。
.scale{100px;height:50px;background:#f00;-webkit-transition:all .5s ease;color:#fff;border-radius:5px 5px;padding:5px;}
.scale:hover{-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-o-transform:scale(1.5);}
效果图如下：
.scale{100px;height:50px;background:#f00;-webkit-transition:all .5s ease;color:#fff;border-radius:5px 5px;padding:5px;}
.scale:hover{-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-o-transform:scale(1.5);-webkit-transform-origin:top center;/*-webkit-transform-origin设定了变换源点*/}
效果图如下：
2.rotate：水平旋转，属性值格式为Xdeg。(deg是“度”的意思)rotate(Xdeg)。X为正数时，顺时针旋转；为负数时，逆时针旋转
.rotate{100px;height:50px;background:#f00;-webkit-transition:all .5s ease;
color:#fff;border-radius:5px 5px;padding:5px;}
.rotate:hover{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);
-o-transform:rotate(10deg);}
效果图如下：
.rotate{100px;height:50px;background:#f00;-webkit-transition:all .5s ease;
color:#fff;border-radius:5px 5px;padding:5px;}
.rotate:hover{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);
-o-transform:rotate(10deg);-webkit-transform-origin:top center;/*-webkit-transform-origin设定了变换源点*/}
效果图如下：
3.translate：定位元素，基于XY轴重新定位元素。translate(Xpx,Ypx)。属性值为一个时，x、y轴参数相同；为两个时，x、y轴分别定位
.translate{100px;height:50px;background:#f00;-webkit-transition:all .5s ease;
color:#fff;border-radius:5px 5px;padding:5px;}
.translate:hover{-webkit-transform:translate(10px,-10px);-moz-transform:translate(10px,-10px);
-o-transform:translate(10px,-10px);}
效果图如下：
4.skew：将元素沿水平方向倾斜变形。skew(Xdeg,Ydeg)。这个比较难表述，想象一下平行四边形吧。属性值为一个时，x、y轴参数相同；为两个时，x、y轴各自倾斜
.skew{100px;height:50px;background:#f00;-webkit-transition:all .5s ease;
color:#fff;border-radius:5px 5px;padding:5px;}
.skew:hover{-webkit-transform:skew(20deg,-10deg);-moz-transform:skew(20deg,-10deg);
-o-transform:skew(20deg,-10deg);}
效果图如下：
.skew{100px;height:50px;background:#f00;-webkit-transition:all .5s ease;
color:#fff;border-radius:5px 5px;padding:5px;}
.skew:hover{-webkit-transform:skew(20deg,-10deg);-moz-transform:skew(20deg,-10deg);
-o-transform:skew(20deg,-10deg);-webkit-transform-origin:top center;/*-webkit-transform-origin设定变换源点*/}
效果图如下：
5.matrix：矩阵，六个值。
.matrix{100px;height:50px;background:#f00;-webkit-transition:all .5s ease;
color:#fff;border-radius:5px 5px;padding:5px;}
.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);}
效果图如下：
