css形变
浏览数：25 /
时间：2015年06月09日
在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轴方向上无斜切变换 |
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
