transform :none | <transform-function>[ <transform-function> ]*
指定一个身份转变
应用于block水平和inline水平的元素。
transform可以对元素进行角度旋转和缩放,请使用webkit内核最新版浏览器浏览该文章以保证CSS3效果能够完全呈现
在设置了transform属性后,可以设置transform-origin属性,这个属性控制变形时的源点,也就是变形时围绕的点。这个属性接受两个参数,可以是百分比、top/center/bottom、带单位的数值。
![transform使用参考指南 - 郭培 - 前端工程师 郭培的博客](http://img.ph.126.net/G8OazBHan05YkUYnPWIg7g==/3210503584363241869.png)
transform的属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。
有五种变形样式,可以重叠多种变形样式,以空格分隔
1.scale:缩放,1为原始大小。scale(x)。正数放大,负数缩小。属性值为一个时,x/y轴同时缩放;属性值为两个值时,分别控制x、y轴的缩放。
.scale{width: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);}
效果图如下:
![transform使用参考指南 - 郭培 - 前端工程师 郭培的博客](http://img775.ph.126.net/Vj1jFN5fQFbPKR9V27uD5A==/4841932549376917347.png)
.scale{width: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设定了变换源点*/}
效果图如下:
![transform使用参考指南 - 郭培 - 前端工程师 郭培的博客](http://img.ph.126.net/vb83lQj5qd_oWxvbOEljgg==/3302264426770923906.png)
2.rotate:水平旋转,属性值格式为Xdeg。(deg是“度”的意思)rotate(Xdeg)。X为正数时,顺时针旋转;为负数时,逆时针旋转
.rotate{width: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);}
效果图如下:
![transform使用参考指南 - 郭培 - 前端工程师 郭培的博客](http://img319.ph.126.net/3Vf8VP3yeP1IXxgSr-PImg==/3828904108195209612.png)
.rotate{width: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设定了变换源点*/}
效果图如下:
![transform使用参考指南 - 郭培 - 前端工程师 郭培的博客](http://img.ph.126.net/_tW1pzoSR1wjZ9vU-HubHg==/914512199333394016.png)
3.translate:定位元素,基于XY轴重新定位元素。translate(Xpx,Ypx)。属性值为一个时,x、y轴参数相同;为两个时,x、y轴分别定位
.translate{width: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);}
效果图如下:
![transform使用参考指南 - 郭培 - 前端工程师 郭培的博客](http://img763.ph.126.net/DnQHc3TUQ82v2hFYULcHMA==/4824762575797569969.png)
4.skew:将元素沿水平方向倾斜变形。skew(Xdeg,Ydeg)。这个比较难表述,想象一下平行四边形吧。属性值为一个时,x、y轴参数相同;为两个时,x、y轴各自倾斜
.skew{width: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);}
效果图如下:
![transform使用参考指南 - 郭培 - 前端工程师 郭培的博客](http://img.ph.126.net/NvhkKqUw0vRlEWhlTNTfqA==/3334634049091804368.png)
.skew{width: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设定变换源点*/}
效果图如下:
![transform使用参考指南 - 郭培 - 前端工程师 郭培的博客](http://img.ph.126.net/PNEPqPDDiJguT9E-V4FZuw==/2943102356487013162.png)
5.matrix:矩阵,六个值。
.matrix{width: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);}
效果图如下:
![transform使用参考指南 - 郭培 - 前端工程师 郭培的博客](http://img763.ph.126.net/c5fv5hLzdJWC6vrpwesmXQ==/4827295850587965995.png)