CSS3 Tranform的作用就是实现一些变换效果，包括旋转、倾斜、缩放、位移效果。
CSS3的这个属性目前只是针对于Webkit（Google Chrome，Safari）、Moz（Firefox）以及Opera浏览器，很遗憾IE还不支持
下面以-webkit-为前缀的表示支持webkit浏览器，以-moz-为前缀的表示支持moz浏览器，以-o-为前缀的表示支持opera浏览器
（1）rotate 旋转效果
语法：-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-o-tranfsorm:rotate(30deg);
参数：括号里的参数表示的是旋转的角度，“deg”即“degree”的缩写，也就是角度的单位
（2）skew 倾斜效果
语法：-webkit-transform:skew(30deg);
-moz-transform:skew(30deg);
-o-transform:translate(120px,50px);
参数：参数同rotate
（3）scale 缩放效果
scale(0.6)效果 scale(-0.6)效果
语法：-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
参数：如果参数小于1则表示缩小，大于1则表示放大
如果参数为负数且绝对值小于1则反转后缩小，否则反转后放大
（4）translate 位移效果
语法： -webkit-transform:translate(120px,100px);
-moz-transform:translate(120px,100px)
-o-transform:translate(120px,100px)
参数：第一个参数表示的是水平方向上的偏移量
第二个参数表示的是竖直方向上的偏移量
完整案例：
<html>
<head>
<title>CSS3 transform测试</title>
<style>
.rt,.sk,.sc,.ts{width:250px;height:200px;float:left;margin:50px 30px;color:#fff;font-size:25px;font-weight:bold;
line-height:200px;text-align:center;}
.rt{background:red;-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-o-transform:rotate(30deg);}
.sk{background:green;-webkit-transform:skew(-30deg);-moz-transform:skew(-30deg);-o-transform:skew(-30deg);}
.sc{background:pink;-webkit-transform:scale(-0.6);-moz-transform:scale(-0.6);-o-transform:scale(-0.6);}
.ts{background:blue;-webkit-transform:translate(50px,50px);-moz-transform:translate(120px,50px); -o-transform:translate(120px,50px)}
</style>
</head>
<body>
<div class="rt">rotate旋转效果</div>
<div class="sk">skew偏移效果</div>
<div class="sc">scale缩放效果</div>
<div class="ts">translate位移效果</div>
</body>
</html>
效果如下：
1180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
