补充前置知识：CSS transform 3D位移与旋转

针对 CSS的Flex布局(弹性盒子) 内容的补充

border 边框的边缘之间，效果是切割彼此一半

当不没有内容的宽高的时候，效果如下

将其他边框设置为透明色，得到一个三角形

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式

vertical-align 样式演示

该内容为 基于2D旋转知识的 扩展

• 3D位移 translate3d(x,y,z);
• 3D旋转 rotate3d(xyz);
• 透视 perspective
• 3D呈现 transfrom-style

在2D平面产生近大远小视觉立体，但是只是效果二维的

透视我们也称为视距，视距就是人的研究到屏幕的距离。越近物体越大；越远物体越小

perspective 可设置透视 （译为视距）

// 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身
// 注意：perspective 属性只影响 3D 转换元素；单位为 px ，越小表示视距位置越近

perspective 的该CSS属性需附加给父级(单位为px)，以便子元素3D转换时呈现透视效果(转换时远近效果)。

因此：要想呈现较好的3D效果，首先父级得拥有透视 perspective 属性，
另：若需要子元素拥有3维立体空间。需要给父级 添加 transform-style:preserve-3d

步骤1 @keyframes 定义动画样式 和 名称

// 顺序可用from {} to {} 或 百分比 0%{} 100%{}

@keyframes move {
     /* 初始位置 */
      0% {
          transform: translateX(0px);
      }
      /* 基于初始位置向右移动500px */
      100% {
          transform: translateX(500px);
      }
  }

步骤2 animation-name 引入动画样式

/* 引入该动画:动画名称 */
animation-name: move;

步骤3 animation-duration 设置动画播放时间

 /* 持续时间 5s */
 animation-duration: 5s;

定义2D转换中的移动，沿着 X 和 Y 轴移动元素；transform 的位移不会影响其他元素的位置

// transform 中的 translate 百分比单位长宽 是对于自身元素单位长宽；
// transform 对行内标签没有效果

该CSS样式常搭配 :hover 与 transition 一起使用

transform: none|transform-functions; //不进行转换 或 设置转换的方式函数

可以采用 溢出隐藏 + 文字溢出隐藏 方式实现

  /* (属性是用来设置如何处理元素中的 空白 (en-US)。)让文本一行显示 */
  white-space: nowrap;
  /* 溢出内容隐藏 */
  overflow: hidden;
  /* 溢出文字用省略号替代 */
  text-overflow: ellipsis;

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 
民间说法：flex 就是一种布局方式，类似于 block，inline-block等

可以说包括我在内的大部分人，都是在被flex垂直水平居中方式所惊艳后才对其有所了解，以至于在日常开发中对于flex的使用，也确实更偏向于元素对齐方式的使用。