transform：变形
transition：过渡动画——需要触发
animation：一刷新就有动画
3d效果：transform-style:preserve-3d;
元素旋转：
1、沿Z轴旋转45度：transform: rotate(45deg);
2、沿X轴旋转45度：transform: rotateX(45deg);
3、沿Y轴旋转45度：transform: rotateY(45deg);
perspective(800px)：设置透视距离（800px适合人眼效果）
负值：逆时针旋转
正值：顺时针旋转
transform:perspective(800px)rotateX(-90deg);
变形：透视距离：（800px适合人眼效果）沿X轴逆时针旋转90度
transform:perspective(800px)rotateY(180deg);
变形：透视距离：（800px适合人眼效果）沿Y轴转顺时针180度
变形中心点：
一、transition：过渡动画——需要触发
二、transform：设置变形
样式：transform：rotate（90deg）；
可选值：rotate：Z轴转
rotateX：X轴转
rotateY：Y轴转
三、
X:nth-child（1）：匹配元素类型为X且是父元素的第一个子元素
X:nth-child（2）：匹配元素类型为X且是父元素的第二个子元素
X:nth-child（3）：匹配元素类型为X且是父元素的第三个子元素
四、tranform-origin 设置变形的中心点
设置左中为中心点：transform-origin:left center;
设置左下为中心点：transform-origin:left bottom;
背面可见：
给外面包的容器做hover
设置盒子背面不可见：backface-visibility:hidden;
设置按3D空间显示：transform-style:preserve-3d;
文字居中：text-align:center;
垂直居中：line-height:300px;
图片翻面：
水平位移：transform: translate();
