2020-12-23

CSS3属性transform详解
该属性有转变形态的意思，可以"translate偏移"，“rotate旋转”，“skew倾斜”，“scale放大缩小”

1.偏移 translate
用法：transform: translate(X轴偏移, Y轴偏移)；

X轴偏移：transform: translateX(10px)；
Y轴偏移：transform: translateY(10px)；

这里的Y轴和正常的Y轴不一样，它往上表示负数，往下表示正数；X轴是正常的

且，如果设置百分比，表示偏移自身的百分比

.旋转 rotate
用法：顺时针：rotate(45deg)

水平：rotateX(45deg)
垂直：rotateY(45deg)
旋转 rotate
用法：顺时针：rotate(45deg)

水平：rotateX(45deg)
垂直：rotateY(45deg)

这是一个属性，配合(转变形态)transtion使用，加了这个属性后，可以设置过度时间，会在时间内完成转变。

过渡时间：all 持续时间 延时时间
持续时间表示：该时间内完成转变
延时时间表示：延时一段时间，再进行转变

指定形态：形态 时间
表示：只会过度指定的形态，其他形态没有过度效果
指定形态后，all需要去掉

加速：ease-in
表示：由慢到快

减速：ease-out
表示：由快到慢

加速然后减速：ease-in-out
例如给了hover（伪类选择器），鼠标移上去会由慢到快，鼠标移开再由快到慢

5.合并写法
transform（转变形态）合并写法：根据写法顺序，执行转变。最好把位移放在最前面

transition（过度效果）合并写法：形态 花费时间 何时开始 运动曲线