CSS—flex布局、过渡transition属性、2D转换transform属性、3D转换transform属性
1.flex布局
也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力，不会产生浮动布局中脱标现象，布局网页更简单，更灵活。
flex容器属性：
| 属性 | 描述 |
|---|---|
| display | 规定用于 HTML 元素的盒类型。 |
| flex-direction | 规定弹性容器内的弹性项目的方向。 |
| justify-content | 当弹性项目没有用到主轴上的所有可用空间时，水平对齐这些项目。 |
| align-items | 当弹性项目没有用到主轴上的所有可用空间时，垂直对齐这些项。 |
| flex-wrap | 规定弹性项目是否应该换行，若一条 flex 线上没有足够的空间容纳它们。 |
| align-content | 修改 flex-wrap 属性的行为。与 align-items 相似，但它不对齐弹性项目，而是对齐 flex 线。 |
| flex-flow | flex-direction 和 flex-wrap 的简写属性。 |
| flex | flex-grow、flex-shrink 以及 flex-basis 属性的简写属性。 |
flex项目属性：
| 属性 | 描述 |
|---|---|
| order | 规定弹性项目相对于同一容器内其余弹性项目的顺序。 |
| flex-grow | 值为数字，项目相对的扩大程度 |
| flex-shrink | 值为数字，项目相对的缩小程度 |
| flex-basis | 值为带单位的长度（如px），flex项目的初始长度 |
| align-self | 用于弹性项目。覆盖容器的 align-items 属性。 |
2.过渡transition属性
CSS 过渡允许在给定的时间内平滑地改变属性值。
| 属性 | 描述 | |
|---|---|---|
| transition | 简写属性，用于将四个过渡属性设置为单一属性。 | |
| transition-delay | 规定过渡效果的延迟（以秒计）。 | |
| transition-duration | 规定过渡效果要持续多少秒或毫秒。 | |
| transition-property | 规定过渡效果所针对的 CSS 属性的名称。 | |
| transition-timing-function | 规定过渡效果的速度曲线。 |
如需创建过渡效果，必须明确两件事：
- 要添加效果的 CSS 属性
- 效果的持续时间
注意：如果未规定持续时间部分，则过渡不会有效果，因为默认值为 0。
3.2D转换transform属性
通过使用 CSS transform 属性，可以利用以下 2D 转换方法：
| 方法 | 描述 | 特点 |
|---|---|---|
translate() | 从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数） | |
rotate() | 根据给定的角度顺时针或逆时针旋转元素 | 正值顺时针，负值逆时针 |
scale() | 增加或减少元素的大小（根据给定的宽度和高度参数） | 可单独写scaleX()和scaleY() |
skew() | 使元素沿 X 和 Y 轴倾斜给定角度 | 可单独写skewX()和skewY() |
matrix() | 把所有 2D 变换方法组合为一个 | 参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) |
此处使用百分比取值法时，可以比较容易实现盒子水平垂直居中
旋转会改变坐标轴向，多重转换以第一种转换的坐标轴为准
注意使用多个属性时，属性值要使用复合属性，即中间用空格隔开
4.3D转换transform属性
| 函数 | 描述 |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate3d(x,y,z) | 定义 3D 转化。 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值。 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值。 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
| perspective(n) | 定义 3D 转换元素的透视视图。 |
translate3d写法必须写满三个数。 因为电脑是平面，所以默认状态下无法看到z轴平移效果。得使用以下视距属性：
注意是直接赋值给父级，视距属性范围在800-1200比较符合人的视觉习惯
每个面都有自己独立的坐标轴，自己旋转后不会影响其他面坐标轴
【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】