CSS常用样式（三）

一、2D变换

　　 1、transform 设置或检索对象的转换

　　取值：

　　none：：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵

translate( [, ])。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0。

translateX( )：指定对象X轴（水平方向）的平移

　　translateY( )：指定对象Y轴（垂直方向）的平移

rotate()：指定对象的2D rotation（2D旋转）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值

scaleX( )：指定对象X轴的（水平方向）缩放

　　scaleY( )：指定对象Y轴的（垂直方向）缩放

skew( [, ])：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 skewX()：指定对象X轴的（水平方向）扭曲

　　skewY()：指定对象Y轴的（垂直方向）扭曲

　　注：不同浏览器需写以下前缀。

内核类型 写法 Webkit(Chrome/Safari) -webkit-transform Gecko(Firefox) -moz-transform Presto(Opera) -o-transform Trident(IE) -ms-transform W3C transform

例子：

CSS代码：

        #transform1
         { 
            margin :  0 auto ; 
            width :  100px ; 
            height :  100px ; 
            background-color :  mediumvioletred ; 
            -webkit-transform :  rotate(15deg) ;
         }  

查看更多关于CSS常用样式（三）的详细内容...