变形
知有
153
CSS3的变形
CSS3提供的变形，主要是对组件，进行旋转、缩放、倾斜、位移4钟变换。
CSS3变形的属性：
transform属性：它用于设置变形，支持一个或多个变形函数，如下。
- translate(tx[,ty])：设置组件左右（tx）移动，向上下（ty）移动，若没有设置参数，默认为0。
- translateX(tx)：单独组件向上下移动的距离。
- translateY(ty)：单独组件向左右移动的距离。
- scale(sx,sy)：它能够设置组件缩放比，横轴为sx，纵轴为sy，sy可以省略，若省略sy默认与sx相同。
- scaleX(sx)：单独控制横轴，相当于scale(sx,1)。
- scaleY(sy)：单独控制纵轴，相当于scale(1,sy)。
- rotate(angle)：设置组件的旋转角度。
- skew(sx,[,sy])：设置组建的倾斜角度，沿x轴(sx)，沿y轴(sy)，sy能够省略，省略后默认为0。
- skewX(sx)：组件沿x轴倾斜sx角度。
- skewY(sy)：组件沿y轴倾斜sy角度。
- matrix(m11,m12,m21,m22,dx,dy)：这是一个基于矩阵变换的函数。其中前四个参数将组成变换矩阵；dx、dy将负责对坐标系统进行位移。
transform-origin：该属性设置变形的中心点。该属性值指定为xCenter，yCenter，其中xCenter，yCenter支持如下几种属性。
- left：指定旋转中心点位于组件的左边界。只能给xCenter。
- top：指定旋转中心点位于组件的上边界。只能给yCenter。
- right：指定旋转中心点位于组件的右边界。只能给xCenter。
- bottom：指定旋转中心点位于组件的下边界。只能给yCenter。
- center：指定旋转中心点位于组件的中间，与xCener和yCenter都指定为center一样。
- 长度值：指定旋转中心点距离左右边界的长度。
- 长度值：指定旋转中心点位于横轴、纵轴上的百分比位置。