CSS3的2D转换用transform来实现
1.rotate() /*通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。*/
2.scal() /*通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数*/
3.skew() /*通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数*/
4.tanaslate() /*通过 translate() 方法， 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数*/ 相当于relative定位
<style> #kuang{ height:50px; width:100px; border:1px solid red; background-color:#C3F; } #kuang11{ height:50px; width:100px; border:1px solid red; background-color:#6F0; margin-top:50px; transform:rotate(30deg) } #kuang12{ height:50px; width:100px; border:1px solid red; background-color:#C00; margin-left:150px; transform:skew(20deg,40deg)/*表示围绕x轴旋转20度，围绕y轴旋转40度*/ } #kuang13 { height:50px; position:relative; width:100px; border:1px solid red; position:relative; background-color:#60C; margin-top:100px; margin-left:100px; transform:scale(2,3)}/*表示宽度是之前的2倍，高度是之前的3倍*/ #kuang14{ height:50px; width:100px; position:relative; border:1px solid red; background-color:#60F; transform:translate(50px,100px)} </style> <body> <div id="kuang"></div> <div id="kuang11"></div> <div id="kuang12"></div> <div id="kuang13"></div> <div id="kuang14"></div> </body>
效果如图所示：