1、过渡（transition）
transition：要过渡的属性 花费时间 运动曲线 何时开始； 多组属性变化，还是用 逗号 隔开
transition-property：规定应用过渡的CSS属性的名称。
transition-duration：定义过渡效果花费的时间，默认是0。
transition-timing-function：规定过渡效果的时间曲线，默认是ease
linear：匀速 ease：逐渐慢下来 ease-in：加速 ease-out：减速 ease-in-out：先加速后减速
transition-delay：规定过渡效果何时开始，默认是0
简写：transition：all 0.5s； // 所有的属性执行过渡 花费0.5秒的时间
2、变形（transform）
1.位移（translate（x，y））
transform：translateX（x）； // 仅水平方向移动
transform：translateY（y）； // 仅垂直方向移动
transform：translate（20px，10px）； // 向右向下分别平移20px，10px
2.缩放（scale（x，y））
transform：scaleX（x）； // 仅水平方向缩放
transform：scaleY（y）； // 仅垂直方向缩放
transform：scale（0.5，0.5）； 元素x，y方向缩小0.5倍
3.旋转（rotate（deg））
对元素进行旋转，正值顺时针，负值逆时针
transform：rotate（180deg）； // 顺时针旋转180度
transform-origin：top right； // 可以调整元素转换变形的原点 默认中心点 旋转 ，如果想要精确位置，可以用 px 像素
4.倾斜（skew（deg，deg））
transform：skew（30deg，0deg）； // 通过 skew 方法把元素水平方向向上倾斜30度，垂直方向不变。
5.3D变形（transform（x，y，z））
x 左边是负值，右边是正值
y 上面是负值，下面是正值
z 里面是负值，外面是正值
transform：rotateX（180deg）； // 围绕X轴旋转
transform：rotateY（180deg）； // 围绕Y轴旋转
transform：rotateZ（180deg）； // 类似普通旋转
6.透视（perspective）
perspective 一般作为一个属性，设置给父元素作用于所有3D 转换的子元素
perspective：500px； // 透视原理：近大远小