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);
}
7月23号=》261页-265页,布布扣,bubuko.com