属性
transform
位移
| 值 | 含义 |
|---|
translateX | 设置水平方向的位移,需要设置指定长度若指定百分比,参考自身宽度的百分比 |
translateY | 设置垂直方向的位移,需要设置指定长度若指定百分比,参考自身高度的百分比 |
translate | 一个值代表水平方向两个值代表:水平,垂直方向 |
缩放
| 值 | 含义 |
|---|
scaleX | 设置水平方向的缩放比例,值为一个数字,1表示不缩放,大于1放大,小于1缩小 |
scaleY | 设置垂直方向的缩放比例,值为一个数字,1表示不缩放,大于1放大,小于1缩小 |
scale | 设置水平方向,垂直方向的缩放比例,一个值同时代表水平和垂直缩放,两个值分别代表:水平缩放,垂直缩放 |
旋转
| 值 | 含义 |
|---|
rotateZ | 设置旋转角度,需要指定一个角度值(deg),正值顺时针,负值逆时针 |
扭曲
| 值 | 含义 |
|---|
skewX | 设置元素在水平方向扭曲,值为角度值 |
skewY | 设置元素在垂直方向扭曲,值为角度值 |
skew | 一个值代表skewX,两个值分别代表skewX,skewY |
多重变换
多个变换,可以同时使用一个transform来编写
多重变换,建议最后旋转
变换原点
- 元素变换时,默认的原点是元素的中心,使用tranform-origin可以设置变换的原点
- 修改变换原点对位移没有影响,对缩放和旋转产生影响
- 如果提供两个值,第一个用于横坐标,第二个用于纵坐标
- 如果提供一个
若是像素值,则表示横坐标,纵坐标取50%
若是关键词,则另一个坐标取50%