- transition-property（属性）: all / other property
- transition-duration（持续时间） : 1s
- transition-timing-function （方法）: how the change in the property will occur
- ease : the change starts slow then go faster then finishes slow
- linear : the change occurs at the same rate
- ease-in : the change starts slow then go faster before the end
- ease-out : the changes starts fast then slows down before the end
- ease-in-out : the change starts slow then go faster then finishes slow
- transition-delay（延迟时间）: 3000ms / 3s
- 多个属性写在 transition 中，顺序为 property duration timing-function delay，可写多个，以逗号隔开
- translate(x: px, y: px) => translate(x, y) => translateX(x: px) + translateY(y: px)
- 水平、垂直方向偏移
- 单位是 px
- 数字可为负，向相反方向偏移
- scale(n) => scale(n1, n2) => scaleX(n) + scaleY(n)
- 水平、垂直方向放大或缩小
- 无单位，数字表示是原来大小的 n 倍
- 数字可为负，向相反方向缩放
- rotate(n:deg / turn / grad / rad)
- 顺时针旋转 n 度
- 单位是 css 角度单位: deg（360 度）、turn（1 圈）、grad（梯度，一个圆 400 梯度）、rad（弧度，一个圆 2pi 弧度）
- 可为负数，逆时针旋转
- skew(n:deg / turn / grad / rad) => skew(n1, n2) => skewX(n) + skewY(n)
- 水平、垂直方向倾斜
- 单位是 css 角度单位: deg（360 度）、turn（1 圈）、grad（梯度，一个圆 400 梯度）、rad（弧度，一个圆 2pi 弧度）
- 可为负数，相反方向倾斜
- 接受关键词：top / right / bottom / left / top right / bottom right / top left / bottom left
- 接受百分比：(30% , 50%)，x 轴偏移 30%，y 轴偏移 50%，找到中心点
- 接受像素值
-
需要设置一个视图容器大小
body { perspective: 500px; }
-
translateZ -> 向前、向后偏移
-
rotateZ 沿 z 轴旋转，与 2d rotate 旋转相同