12.1　　CSS3提供的变形支持

　　　　CSS3提供的变形支持可以对HTML组件进行常见的几何变换，包括旋转、缩放、倾斜、位移

　　　　4中变换，也可以使用变换矩阵进行变形。

　　　　CSS3为变形支持提供了如下两个属性值。

　　　　　　transform：该属性用于设置变形。该属性支持一个或多个变形函数。CSS3提供了如下变形函数。

　　　　　　　　translate(tx [,ty])：该函数设置HTML组件横向上移动tx距离，纵向上移动ty距离。其中ty参数

　　　　　　　　　　　　　　　　　　可以省略，如果省略ty参数，则ty默认为0，表明纵向上没有位移。

　　　　　　　　translateX(tx)：该函数设置HTML组件横向上移动tx距离。

　　　　　　　　translateY(ty)：该函数设置HTML组件纵向上移动ty距离。

　　　　　　　　scale(sx,xy)：该函数设置HTML组件横向上缩放比为sx，纵向上缩放比为sy。sy参数可以省略，如果

　　　　　　　　　　　　　　　　省略该参数，sy默认等于sx，也就是保持纵横比缩放。

　　　　　　　　scaleX(sx)：该函数相当于执行scale(sx,1)。

　　　　　　　　scaleX(sy)：该函数相当于执行scale(1,sy)。

　　　　　　　　rotate(angle)：该函数设置HTML组件顺时针转过angle角度。

　　　　　　　　skew(sx [,sy])：该函数设置HTML组件沿着X轴倾斜sx角度，沿着Y轴倾斜sy角度。其中sy参数可以

　　　　　　　　　　　　　　　　 省略，如果省略sy参数，则sy默认为0.

　　　　　　　　skewX(sx)：该函数设置HTML组件沿着X轴倾斜sx角度。

　　　　　　　　skewX(sy)：该函数设置HTML组件沿着Y轴倾斜sy角度。

　　　　　　　　matrix(m11,m12,m21,m22,dx,dy)：这是一个基于矩阵变换的函数。其中前4个参数将组成变形

　　　　　　　　　　　　　　　　　　　　　　　　　　 矩阵；dx、dy将负责对坐标系统进行平移。

　　　　　　transform-origin：该属性设置变形的中心店。该属性值应该制定为xCenter yCenter，

　　　　　　其中xCenter、yCenter支持如下属性。

　　　　　　　　left：指定旋转中心点位于HTML组件的左边界。该属性值只能指定给xCenter。

　　　　　　　　top：指定旋转中心点位于HTML组件的上边界。该属性值只能指定给yCenter。

　　　　　　　　right：指定旋转中心点位于HTML组件的右边界。该属性值只能指定给xCenter。

　　　　　　　　bottom：指定旋转中心点位于HTML组件的下边界。该属性值只能指定给YCenter。

 

　　　　代码示范：

　　　　　　//设置该元素旋转30度

　　　　　　div{

　　　　　　　　width:100px;

　　　　　　　　height:100px;

　　　　　　　　border:1px solid;

　　　　　　　　transform:rotate(30deg);

　　　　　　}