--- title: CSS3 2d Transforms localeTitle: CSS3 2d变换 --- ## CSS3 2d变换 CSS3变换允许您平移,旋转,缩放和倾斜元素。 变换是一种让元素改变形状,大小和形状的效果 位置。 CSS3支持2D和3D转换。 ## 浏览器支持2D变换 表中的数字指定了完全支持的第一个浏览器版本 财产。 数字后跟-ms-, - webkit-,-moz-或-o-指定第一个版本 使用前缀。 |财产| Chrome | IE | Firefox | Safari |歌剧| | --------------------------------------- | ---------------------- | ------------------ | ------------------- | -------------------- | -------------------------------------------- | |变换| 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 9.0 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- | |变换原点 (双值语法)| 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 9.0 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- | ## CSS3 2D变换 方法: * `translate()` * `rotate()` * `scale()` * `skewX()` * `skewY()` * `matrix()` ## translate()方法 `translate()`方法将元素从其当前位置移开(相应地 给出了X轴和Y轴的参数。 以下示例将`