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();

---