今日学习内容

转换

改变元素在页面中的位置translate，大小scale，角度rotate，以及形状即为转换

转换的分类分为： 2D转换和3D转换，2D是平面3D是空间内即在xyz中的转换

在2D转换中scale缩放属性的运用

skew()倾斜属性的运用：

可以在x轴或y轴上倾斜，若在x轴上倾斜且取值为正，则对象在y轴上逆时针倾斜，若值为负

则顺时针倾斜

若在y轴上倾斜且取值为正，则对象在x轴上顺时针倾斜，若值为负则在x轴上逆时针倾斜

小结：向 x轴发生倾斜，实际上改变的是y轴的角度 ， 向着y轴发生倾斜，实际上改变的是x轴的角度

转换原点

transform-origin ：取值x轴：left/center/right

取值y轴：top/center/bottom

1.可以以px为单位

2.可以以%号为单位

动画过渡

transition：

属性值

transition-property （ 检索或设置对象中的参与过渡的属性 ）

transition-duration （ 检索或设置对象过渡的持续时间 ）

transition-timing-function （ 检索或设置对象中过渡的动画类型(过渡时间曲线函数)

transition-delay （ 检索或设置对象延迟过渡的时间 ）

动画

将多个过渡放在一起，使用关键帧来控制动画的每一个状态，使得元素从一种样式逐渐变化为*另一种样式

关键帧： 动画执行的时间节点，一个动画至少2个关键帧

动画的声明：@keyframe +名称

liner 匀速

infinite 持续的

css的优化