在web中,想要实现文字和图片的施加或者形变,一般需要通过Photoshop或者Flash实现。而在css3中,用户可以通过rotate属性实现伸缩,skew属性实现倾斜等效果。rotate属性的基本语法如下所示:
transform:none | <transform-function> [<transform-function>]
具体属性含义如下:
属性值 | 含义 |
none | 指定一个身份转变 |
matrix(<number>,<number>,<number>,<number>,<number>,<number>) | 以一个包含6个值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵 |
translate(<translation-value>[,<translation-value>]) | 通过矢量[tx,ty]指定一个2D变换,tx是第一个过渡值参数,ty是第二个过渡值参数选项。如果ty未被提供,则默认ty以0作为其值 |
translateX(<translation-value>) | 通过给定一个X方向上的数目指定一个translation |
translateY(<translation-value>) | 通过给定一个Y方向上的数目指定一个translation |
scale(<number>[,<number>]) | 提供执行[sx,sy]缩放矢量的两个参数指定一个2D的缩放。如果第二个参数未被提供,默认取第一个参数的值 |
scaleX(<number>) | 使用[sx,1]缩放矢量执行缩放操作,sx为所需参数 |
scaleY(<number>) | 使用[1,sy]缩放矢量执行缩放操作,sy为所需参数 |
rotate(<angle>) | 通过指定的角度参数对元素指定一个2D旋转,需先有transform-orgin属性的定义 |
skewX(<angle>) | 按给定的角度沿X轴指定一个skew变换(斜切变换) |
skewY(<angle>) | 按给定的角度沿Y轴指定一个skew变换 |
skew(<angle>[,<angle>]) | X轴Y轴上的skew变换。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值默认为0,也就是Y轴方向上无斜切变换 |