CSS3 2D 转换

CSS3 转换

CSS3转换，我们可以移动，比例化，反过来，旋转，和拉伸元素。

它是如何工作？

变换的效果，让某个元素改变形状，大小和位置。

您可以转换您使用2D或3D元素。

浏览器支持

Internet Explorer 10, Firefox, 和 Opera支持transform 属性.

Chrome 和 Safari 要求前缀 -webkit- 版本.

注意： Internet Explorer 9 要求前缀 -ms- 版本.

2D 转换

在本章您将了解2D变换方法：

• translate()
• rotate()
• scale()
• skew()
• matrix()

在下一章中您将了解3D转换。

 div
 {
 transform: rotate(30deg);
 -ms-transform: rotate(30deg); /* IE 9 */
 -webkit-transform: rotate(30deg); /* Safari and Chrome */
 } 
运行代码

translate() 方法

rotate() 方法

scale() 方法

skew() 方法

matrix() 方法

新转换属性

以下列出了所有的转换属性:

2D 转换方法