变换

transform有几个主要效果:translate(),scale(),rotate(),skew()

translate()

声明平移变换。

使用两个长度值或百分比表示在二维上分别按照指定X轴和Y轴的值进行的平移。

scale(),scaleY(),scaleX()

声明缩放的比例

单一数值

单一的数值即指定了一个缩放系数，同时作用于X轴和Y轴让该元素进行缩放，相当于指定了单个值的scale()(2D缩放)函数。
两个长度/百分比值

两个数值即分别指定了2D比例的X轴和Y轴的缩放系数，相当于指定了两个值的scale()（2D缩放）函数。

rotate()

声明旋转属性

skew()

定义一个元素在二维平面上的倾斜转换

使用两个角度参数来分别表示沿横纵坐标的扭曲程度

TIPS:transform可作用元素

内联函数❌(例如text)

如果要使用该怎么办呢？对元素施加：

display:inline or inline-block

transform-origin

更改一个元素变形的原点

组合变换

过渡

transition包含transition-property，transition-duration，transition-timing-function 和 transition-delay

首先，指定过渡属性

你可以设为所有all,或者特定的一个或者多个元素例如width height

其次，指定过渡动画时间

你可以为所有元素设定一个共用的时间，也可以分别设定，但是必须分别使用transition-property和transition-duration:

然后，设置`transition-timing-function`

dddd的几个选项：

Cubic-bezier

TIPS:使用开发者工具调试曲线

继续，指定或跳过过渡延迟

transition-duration: 1s;

多个属性

transition: width 1s, height 2s ease-in .5s , ....

TIPS:注意不可变换元素

例如display，如果想让要将元素消失带有过渡，可以使用opacity

CSS3 变换、过渡指南

变换