CSS#提供的变形支持
transform:该属性设置HTML组件横向上移动tx距离,纵向上移动ty距离。其中ty参数可以省略,如果省略ty参数,则ty默认为0
- translate(tx,ty):该函数设置HTML组件横向上移动tx个距离,纵向上移动ty距离。
- translateX:该函数设置HTML组件横向上移动tx个距离。
- translateY:该函数设置HTML组件横向上移动ty距离。
- scale(sx,sy):该函数设置HTML组件横向上缩放比例为sx,纵向上缩放比例为sy。
- scaleX:
- scaleY:
- rotate(angle):该函数设置HTML组件顺时针转过angle角度。
- skew(sx,sy):该函数设置HTML组件沿着X轴倾斜sx角度,沿着Y轴倾斜sy角度。
- skewX:
- skewY:
- matrix:(m11,m12,m21,m22,dx,dy):这是一个基于矩形变换的函数。其中前面四个参数将组成变形矩阵;dx,dy将负责对坐标系统进行平移。
transform-origin:该属性设置变形的中心点。该属性值应该制定为xCenter yCenter,其中xCenter、yCenter支持如下几种属性
- left:制定旋转中心点位于HTML组件的左边界。该属性值只能制定为xCenter。
- top:
- right:
- bottom:
- center:指定旋转中心点位于HTML组件的中间。如果将xCenter,yCenter都指定为center,则旋转中心点位于HTML元素的中心。
- 长度值:指定旋转中心点距离左边界、右边界长度
- 百分比:指定旋转中心点位于横向、纵向上的百分比