3D转换及弹性盒子

3D转换就是增加了空间Z轴

translateZ() 往Z轴移动  scaleZ() 沿着Z轴缩放 rotateZ()

        translate3d(X轴位移的距离,y轴位移的距离,z轴位移的距离)

        scale3d(x轴缩放的大小,y缩放的大小,z轴缩放的大小)

        rotate3d(0/1,0/1,0/1,旋转角度)

        当功能函数的变量值为1时执行旋转度数

 弹性盒子

弹性盒子的转变 display：flex

在父元素上进行设置的值

flex-direction：子元素在父容器中的位置（默认row）

1. row：横向从左到右排列(左对齐)，默认排列
2. row-reverse：横向右对齐元素反转
3. column：纵向排列
4. column-reverse：反转纵向排列

内容对齐（justify-content）属性应用在弹性容器上，控制伸缩项目在伸缩容器中的主轴（main axis）对齐方式

          ■ flex-start默认值，主轴顶端对齐

          ■ flex-end主轴末端对齐

          ■ center主轴居中对齐

          ■ space-between在主轴两端对齐，中间自动分配

          ■ space-around在主轴自动分配空白空间

          ■ space-evenly平均分配空白空间

侧轴对齐方式：控制伸缩项目在伸缩容器中的侧轴对齐方式

  flex-start：弹性盒子元素在伸缩容器里延侧轴顶端对齐。

  flex-end：弹性盒子元素在伸缩容器里延侧轴末端对齐。

  center：弹性盒子元素在伸缩容器里延侧轴居中对齐。

  baseline：弹性盒子元素在伸缩容器里延侧轴基线对齐。

  stretch：默认值。项目未设置侧轴的尺寸时拉伸成容器的侧轴尺寸。

当伸缩容器的侧轴还有多余空间时，本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式；

          ■ flex-start行和行在侧轴顶端对齐，没有行间距

          ■ flex-end行和行在侧轴顶端对末端对齐，没有行间距

          ■ center行和行在侧轴居中对齐，没有行间距

          ■ space-between行和行两端对齐，中间自动分配侧轴剩余空间。

          ■ space-around行和行自动分配侧轴剩余空间。

          ■  stretch  默认值。行和行补强制拉伸以适应容器侧轴的长度。

          ■ space-evenly平均分配空白空间

3、justify-content(主轴对齐方式)

 3、justify-content(主轴对齐方式) 3、justify-content(主轴对齐方式)

stify-content(主轴对齐方式)justify-content(主轴对齐方式)