CSS3的2D效果（Reset257）

记于 2020.10.28 【P310】😃

一、transition

1、 transition CSS 属性是 transition-property 过渡特性，transition-duration 过渡持续时间，transition-timing-function 过渡定时功能和 transition-delay 过渡延迟组成的一个简写属性，用于实现过渡效果。

2、过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。

3、transition 的属性值

• transition-property：指定应用过渡属性的名称。

• transition-duration：属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。

• transition-timing-function：规定过渡效果的加速度曲线，默认值是ease，通过transition-property中定义被过渡属性，每个 timing-function 的值代表与这个属性相对应的timing function。更多用法

linear：规定以相同速度开始至结束的过渡效果。
ease：规定慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in:规定以慢速开始的过渡效果。
ease-out：规定以慢速结束的过渡效果。
ease-in-out：规定以慢速开始和结束的过渡效果。
cubic-bezier(n,n,n,n)：在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值。

（4）transition-delay：规定了在过渡效果开始作用之前需要等待的时间。

二、transform

transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。

注意 ! 这些变化都是以中心点为中心的变化

（1）旋转 transform: rotate(90deg)
（2）平移 transform: translate(100px)
（3）扭曲 transform: skew(-10deg, -10deg)
（4）缩放 transform: scale(.5)
（5）复合属性 transform: scale(.5) skew(-10deg, -10deg) translate(100px) rotate(90deg)
（6）矩阵变形（还未接触😅）

三、transform-origin

前面说到 transform 的变化都是以中心点为中心的变化，这个属性就是用来更改以哪个点为中心点进行变化。他可以有

• 一个值：必须是，，或 left, center, right, top, bottom关键字中的一个。
• 两个值：其中一个必须是，，或left, center, right关键字中的一个。另一个必须是，，或top, center, bottom关键字中的一个。
• 三个值：前两个值和只有两个值时的用法相同。第三个值必须是。它始终代表Z轴偏移量。

多加练习！忘了就复习