一、过渡 transition

transition: all 2s 简写属性
transition-property: none|all|property 规定应用过渡的 CSS 属性的名称
transition-duration: 5s 定义过渡效果花费的时间。默认是 0。
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n); 规定过渡效果的时间曲线。默认是 "ease"
transition-delay: 5s 规定过渡效果何时开始。默认是 0。

---

二、转换transform

transform 向元素应用 2D 或 3D 转换
transform-origin 允许你改变被转换元素的位置。
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。

---

三、2D转换

1、translate()

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
transform: translate(50px,100px);

2、rotate()

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
transform: rotate(30deg);

3、scale()

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
transform: scale(2,4);

4、skew()

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
transform: skew(30deg,20deg);

5、matrix()

matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
transform:matrix(0.866,0.5,-0.5,0.866,0,0);

---

四、3D转换

1、translate3d()

还包括translateX() 、translateY()、translateZ()方法
transform3d: translate(50px,100px,50px);

2、rotate3d()

还包括rotateX() 、rotateY()、rotateZ()方法
transform: rotate3d(30deg,60deg,30deg);

3、scale3d()

还包括scaleX() 、scaleY()、scaleZ()方法
`transform: scale3d(2,4,2);

---