css形变

在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轴方向上无斜切变换