过渡动画用于简单的状态变化，帧动画用于更复杂的动画序列，而变换用于改变元素的位置和外观，这三个部分共同构成了 CSS 动画的核心
变换包括
2D变换与3D变换。2D变换在平面中操作，3D变换在空间中操作，2D与3D的概念相信很多同学都知道。变换可理解为将节点复制一份并生成新图层，原节点隐藏，在新图层中使用新节点进行变换操作。声明
transform-style可实现2D变换与3D变换间的切换，transform-style在父节点中声明，即发生变换的节点的父节点。flat：所有变换效果在平面中呈现(
默认)preserve-3d：所有变换效果在空间中呈现
一、API概览
transform包括六大函数，每个函数包括以下参数。translate()：位移
- 默认：XYZ轴不声明默认是
0
- 单位：
Length长度，可用任何长度单位，允许负值
- 正值：沿X轴向右位移/沿Y轴向上位移/沿Z轴向外位移
- 负值：沿X轴向左位移/沿Y轴向下位移/沿Z轴向内位移
- 函数：
translate(x,y)：2D位移
translate3d(x,y,z)：3D位移
translateX(x)：X轴位移，等同于
translate(x,0)或translate3d(x,0,0)translateY(y)：Y轴位移，等同于
translate(0,y)或translate3d(0,y,0)translateZ(z)：Z轴位移，等同于
translate3d(0,0,z)scale()：缩放
- 默认：XYZ轴不声明默认是
1或100%
- 单位：
Number数值或Percentage百分比，允许负值
- 正值：
0<(x,y,z)<1沿X轴缩小/沿Y轴缩小/沿Z轴变厚，(x,y,z)>1沿X轴放大/沿Y轴放大/沿Z轴变薄
- 负值：
1<(x,y,z)<0翻转沿X轴缩小/沿Y轴缩小/沿Z轴变厚，(x,y,z)<-1翻转沿X轴放大/沿Y轴放大/沿Z轴变薄
- 函数：
scale(x,y)：2D缩放
scale3d(x,y,z)：3D缩放
scaleX(x)：X轴缩放，等同于
scale(x,1)或scale3d(x,1,1)scaleY(y)：Y轴缩放，等同于
scale(1,y)或scale3d(1,y,1)scaleZ(z)：Z轴缩放，等同于
scale3d(1,1,z)skew()：扭曲
- 默认：XY轴不声明默认是
0
- 单位：
Angle角度或Turn周
- 正值：沿X轴向左扭曲/沿Y轴向下扭曲
- 负值：沿X轴向右扭曲/沿Y轴向上扭曲
- 函数：
skew(x,y)：2D扭曲
skewX(x)：X轴扭曲，等同于
skew(x,0)skewY(y)：Y轴扭曲，等同于
skew(0,y)rotate()：旋转
- 默认：XYZ轴不声明默认是
0
- 单位：
Angle角度或Turn周
- 正值：2D旋转时顺时针旋转
- 负值：2D旋转时逆时针旋转
- 函数：
rotate()：2D旋转
rotate3d(x,y,z,a)：3D旋转，
[x,y,z]是一个向量，数值都是0~1rotateX(a)：X轴旋转，等同于
rotate(1,0,0,a)，正值时沿X轴向上逆时针旋转，负值时沿X轴向下顺时针旋转rotateY(a)：3D Y轴旋转，等同于
rotate(0,1,0,a)，正值时沿Y轴向右逆时针旋转，负值时沿Y轴向左顺时针旋转rotateZ(a)：3D Z轴旋转，等同于
rotate(0,0,1,a)，正值时沿Z轴顺时针旋转，负值时沿Z轴逆时针旋转matrix()：矩阵
matrix(a,b,c,d,e,f)：2D矩阵(位移、缩放、扭曲和旋转的综合函数)
matrix(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p)：3D矩阵(位移、缩放、扭曲和旋转的综合函数)
perspective()：视距
- 默认：
0
- 单位：
Length长度，可用任何长度单位
应用
transform的场景很多，不局限于某种指定场景，若结合transition与animation使用还需注意性能问题。二、使用&注意
- 元素的初始位置是不会改变的，改变的只是视觉位置。它的好处是，无论是流式布局（Flow）、Flexbox 布局还是 Grid 布局，它都不会影响 Web 上其他元素的布局
translate()函数的参数是个百分比值时，该百分比值是相对于元素自身的大小计算，而不是父容器尺寸计算
translateZ()函数的值等于或大于perspective()函数的值，它会导致位移消失。你可以随时在translateZ()函数中设置一个无限小的值，但反之则不成立。一旦超过perspective()函数的值，元素将不再可见。
perspective(0px)会导致translateZ()效果被忽略。任何非零的perspective()函数，translateZ()都会有效
