[CSS参考手册](http://css.doyoe.com/)»[属性列表](#)»[2D变换属性](#)» 相关内容： [**其它2D变换属性**选择其它项](#) - [transform](#) - [transform-origin](#) # transform - **版本：CSS3** - 继承性：无 ### 语法： **transform**：none | matrix(<number>,<number>,<number>,<number>,<number>,<number>)? translate(<length>[,<length>])? translateX(<length>)? translateY(<length>)? rotate(<angle>)? scale(<number>[,<number>])? scaleX(<number>)? scaleY(<number>)? skew(<angle>[,<angle>])? skewX(<angle>) || skewY(<angle>)? **默认值**：none ### 取值： none：无转换matrix(<number>,<number>,<number>,<number>,<number>,<number>)：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵translate(<length>[, <length>])：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0translateX(<length>)：指定对象X轴（水平方向）的平移translateY(<length>)：指定对象Y轴（垂直方向）的平移rotate(<angle>)：指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义scale(<number>[, <number>])：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值scaleX(<number>)：指定对象X轴的（水平方向）缩放scaleY(<number>)：指定对象Y轴的（垂直方向）缩放skew(<angle> [, <angle>])：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0skewX(<angle>)：指定对象X轴的（水平方向）扭曲skewY(<angle>)：指定对象Y轴的（垂直方向）扭曲 ### 说明： **设置或检索对象的转换。** - 对应的脚本特性为**transform**。 ### 兼容性： - 浅绿 = 支持 - 红色 = 不支持 - 墨绿 = 部分支持 - 橙色 = 实验性质 <table class="gdataform"><thead><tr><th><a href="#browser" title="查看本文档测试时所用浏览器版本">支持版本</a>\类型</th> <th><span class="browser-ie">IE</span></th> <th><span class="browser-firefox">Firefox</span></th> <th><span class="browser-safari">Safari</span></th> <th><span class="browser-chrome">Chrome</span></th> <th><span class="browser-opera">Opera</span></th> </tr></thead><tbody><tr><th>版本</th> <td class="unsupport">6.0-8.0</td> <td rowspan="2" class="experimentsupport">4.0-9.0</td> <td rowspan="2" class="experimentsupport">5.1</td> <td rowspan="2" class="experimentsupport">13.0-16.0</td> <td rowspan="2" class="experimentsupport">11.50-11.60</td> </tr><tr><th>版本</th> <td class="experimentsupport">9.0-10.0</td> </tr></tbody></table> ### 写法： | 内核类型 | 写法 | |-----|-----| | Webkit(Chrome/Safari) | -webkit-transform | | Gecko(Firefox) | -moz-transform | | Presto(Opera) | -o-transform | | Trident(IE) | -ms-transform | | W3C | transform | ### 示例： # 矩阵变换：matrix() - transform:matrix(0,1,1,1,10,10) # 平移：translate(), translateX(), translateY() - transform:translate(5%,10px) - transform:translate(-10px,-10px) - transform:translateX(20px) - transform:translate(20px) - transform:translateY(10px) - transform:translate(0,10px) # 旋转：rotate() - transform:rotate(-15deg) - transform:rotate(15deg) # 缩放：scale() - transform:scale(.8) - transform:scale(1.2) # 扭曲：skew() - transform:skew(-5deg) - transform:skew(-5deg,-5deg) Copyright © 2006-2012 [Doyoe](http://www.doyoe.com/). All Rights Reserved