CSS3 transform 属性 · W3School CSS 参考手册

# CSS3 transform 属性 ## 实例旋转 div 元素： ``` div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */ } ``` 页面底部有更多实例。 ## 浏览器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。 Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。 Opera 只支持 2D 转换。 ## 定义和用法 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。为了更好地理解 transform 属性，请查看这个[演示](/example/css3/demo_css3_transform.html)。 | 默认值： | none | | --- | --- | | 继承性： | no | | --- | --- | | 版本： | CSS3 | | --- | --- | | JavaScript 语法： | _object_.style.transform="rotate(7deg)" | | --- | --- | ## 语法 ``` transform: none|_transform-functions_; ``` | 值 | 描述 | 测试 | | --- | --- | --- | | none | 定义不进行转换。 | [测试](/tiy/c.asp?f=css_transform_rotate&p=22) | | matrix(_n_,_n_,_n_,_n_,_n_,_n_) | 定义 2D 转换，使用六个值的矩阵。 | [测试](/tiy/c.asp?f=css_transform_matrix) | | matrix3d(_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 | | translate(_x_,_y_) | 定义 2D 转换。 | [测试](/tiy/c.asp?f=css_transform_translate) | | translate3d(_x_,_y_,_z_) | 定义 3D 转换。 | | translateX(_x_) | 定义转换，只是用 X 轴的值。 | [测试](/tiy/c.asp?f=css_transform_translatex) | | translateY(_y_) | 定义转换，只是用 Y 轴的值。 | [测试](/tiy/c.asp?f=css_transform_translatey) | | translateZ(_z_) | 定义 3D 转换，只是用 Z 轴的值。 | | scale(_x_,_y_) | 定义 2D 缩放转换。 | [测试](/tiy/c.asp?f=css_transform_scale) | | scale3d(_x_,_y_,_z_) | 定义 3D 缩放转换。 | | scaleX(_x_) | 通过设置 X 轴的值来定义缩放转换。 | [测试](/tiy/c.asp?f=css_transform_scalex) | | scaleY(_y_) | 通过设置 Y 轴的值来定义缩放转换。 | [测试](/tiy/c.asp?f=css_transform_scaley) | | scaleZ(_z_) | 通过设置 Z 轴的值来定义 3D 缩放转换。 | | rotate(_angle_) | 定义 2D 旋转，在参数中规定角度。 | [测试](/tiy/c.asp?f=css_transform_rotate) | | rotate3d(_x_,_y_,_z_,_angle_) | 定义 3D 旋转。 | | rotateX(_angle_) | 定义沿着 X 轴的 3D 旋转。 | [测试](/tiy/c.asp?f=css_transform_rotatex) | | rotateY(_angle_) | 定义沿着 Y 轴的 3D 旋转。 | [测试](/tiy/c.asp?f=css_transform_rotatey) | | rotateZ(_angle_) | 定义沿着 Z 轴的 3D 旋转。 | [测试](/tiy/c.asp?f=css_transform_rotatez) | | skew(_x-angle_,_y-angle_) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 | [测试](/tiy/c.asp?f=css_transform_skew) | | skewX(_angle_) | 定义沿着 X 轴的 2D 倾斜转换。 | [测试](/tiy/c.asp?f=css_transform_skewx) | | skewY(_angle_) | 定义沿着 Y 轴的 2D 倾斜转换。 | [测试](/tiy/c.asp?f=css_transform_skewy) | | perspective(_n_) | 为 3D 转换元素定义透视视图。 | 测试 | ## 亲自试一试 - 实例 [扔到桌子上面的图片](/tiy/t.asp?f=css3_image_gallery) 本例演示如何创建“宝丽来”图片，并旋转图片。 ``` <!DOCTYPE html> <html> <head> <style> body { margin:30px; background-color:#E9E9E9; } div.polaroid { width:294px; padding:10px 10px 20px 10px; border:1px solid #BFBFBF; background-color:white; /* Add box-shadow */ box-shadow:2px 2px 3px #aaaaaa; } div.rotate_left { float:left; -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ -o-transform:rotate(7deg); /* Opera */ transform:rotate(7deg); } div.rotate_right { float:left; -ms-transform:rotate(-8deg); /* IE 9 */ -moz-transform:rotate(-8deg); /* Firefox */ -webkit-transform:rotate(-8deg); /* Safari and Chrome */ -o-transform:rotate(-8deg); /* Opera */ transform:rotate(-8deg); } </style> </head> <body> <div class="polaroid rotate_left"> <img src="/i/ballade_dream.jpg" alt="郁金香" width="284" height="213" /> <p class="caption">上海鲜花港的郁金香，花名：Ballade Dream。</p> </div> <div class="polaroid rotate_right"> <img src="/i/china_pavilion.jpg" alt="世博中国馆" width="284" height="213" /> <p class="caption">2010年上海世博会，中国馆。</p> </div> </body> </html> ``` ## 相关页面 CSS3 教程：[CSS3 2D 转换](/css3/css3_2dtransform.asp "CSS3 2D 转换") CSS3 教程：[CSS3 3D 转换](/css3/css3_3dtransform.asp "CSS3 3D 转换")