第十五天笔记，flex布局，自定义动画，CSS3 3D

CSS 弹性盒子布局

display:flex

给一个div设置display：flex；这个div就可以成为flex容器

flex布局

通常被称为flexbox，是一种一维的布局模型。它给flexbox的子元素之间提供了强大的空间分布和对齐能力。

有主轴和交叉轴两根轴线，主轴由flex-direction定义，交叉轴垂直于主轴。

1.flex-direction属性（设置在父元素上）

有四个值，row,row-reverse,column,column-reverse

当你设置了row或row-reverse时，主轴蒋沿着inline方向延伸。交叉轴沿着列向下延伸

当你设置了column或column-reverse时，主轴会沿着上下方向延伸，交叉轴就是水平方向

2.justify-content属性（设置在父元素上）

flex-start，flex-end，center，space-between，space-around，space-evenly

3.align-items属性（设置在父元素上）

flex-start，flex-end，center，stretch，baseline

4.align-content属性（设置在父元素上）

只适用多行的flex容器（也就是flex容器中的子项不止一行时该属性才有效果）. 它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体 （属性值为：flex-start、flex-end、center时）进行对齐

flex-start，flex-end，center，space-between，space-around，stretch

5.flex-wrap(设置在父元素上)

nowrap（默认）：所有flex item将在一条线上 wrap：flex item将会从上到下分为多行 wrap-reverse：flex item将会从下到上分为多行

6.order属性（设置在子元素上）

默认情况下，flex item按源顺序排列。然而，order属性控制它们在flex容器中出现的顺序 order:（整数值）默认为0

自定义动画

1.animation-name：自定义动画名称

与规则@keyframes配合使用，

eg:@keyframes mymove{} animation-name:mymove

2.animation-duration：自定义动画过渡时间单位秒或毫秒

3.animation-timing-function:过渡类型

linear、ease、ease-in、ease-out、ease-in-out

4.animation-delay:设置对象延迟时间单位秒或毫秒

5.animation-iteration-count:检索或设置对象动画的循环次数

infinite:无限循环；number:循环的次数

6.animation-direction：检索或设置对象动画在循环中是否反向运动

normal:正常方向；reverse:反方向运行；alternate：动画先正常运行在反方向运行，并持续交替运行

alternate-reverse：动画先反方向运行再正常运行，并持续交替运行

7.animation-play-state：检索或设置对象动画的状态

running：运动；paused:暂停；

animation-play-state:paused；当鼠标经过动画时停止，鼠标移开动画继续执行

CSS3 3D

3D位移：

主要包括translateZ()，translate3d()两个功能函数

3D旋转：

主要包括rotateX()、rotateY()、rotateZ()、rotate3d()四个功能函数

3D缩放

主要包括scaleZ()和scale3d()两个功能函数

景深：

近大远小 景深

透视：观察3d元素的位置

perspective:(900~1200px)（在父元素中使用）

transform:perspective(1200px)（在子元素中使用）

建议只设置父元素，两个都设置会发生冲突

perspective-origin：观察3d元素的位置（角度）

transform-style属性

transform-style属性是3D空间的一个重要属性，指定嵌套元素如何在3D空间中呈现。

flat：默认值，表示所有子元素在2D平面呈现。

preserve-3d：表示所有的元素在3D空间中呈现。