css基础知识9（3D效果弹性盒）

1.3D效果

语法：transform-origin：x-axis y-axis z-axis说明：变形的原点，默情况变形的原点在元素的中心，或者是元素X轴和Y轴的50%处。它可以是长度值、百分比或者是一下三个关键词之一：left（表示在包含宽的X轴方向长度的0%），center（表示中间点）或right（表示长度的100%）。第一个长度值指定相对于元素的包含框的X轴位置上；第二个长度值指定相对于元素的包含框的Y轴的位置上。

语法：transform-style:flat|preserve-3d；说明：规定如何在3D空间中呈现被嵌套的元素。
flat：子元素将不保留其3D位置。preserve-3d：子元素将保留其3D位置。

perspective属性：透视，视角perspective取值为none或者不设置就没有真3D空间。perspective取值越小，3D效果越明显，perspective的值无穷大，或者值为0是与取值为none效果一样。

语法：perspective-origin：x-axis y-axis说明：定义3D元素所基于的X轴和Y轴，默认值为“50% 50%”（也就是center）。它可以是长度值、百分比或者是一下三个关键词之一：left（表示在包含宽的X轴方向长度的0%），center（表示中间点）或right（表示长度的100%）。第一个长度值指定相对于元素的包含框的X轴位置上；第二个长度值指定相对于元素的包含框的Y轴的位置上。

语法：backface-visibility：visible|hidden；说明：定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到背面时该属性很有用。visible:为backface-visibility的默认值，表示反面可见。hidden：表示反面不可见。

2. css3动画

1）过渡动画，从初始状态过渡到结束状态这个过程中产生的动画。状态指的是大小，位置，颜色，变形等属性。Css过渡只能定义收和尾两个状态，所以是最简单的一种动画。

2）关键帧动画，可以连续定义多个状态，也就是说可以定义任意多的关键帧从而能实现更复杂的动画效果。

语法：@keyframes animationname{keyframes-selector{css-style;}}
说明：animationname：声明动画的名称。keyframes-selector：用来划分动画的时长，可以使用百分比形式，也可使用“from”和“to”的形式。

语法：animation-iteration-count:n|infinite;
说明：定义动画的播放次数。
n:定义动画播放次数的数值。
infinite：规定动画用该无限次播放。

语法：animation-direction：normal|alternate；
说明：定义是否应该轮流反向播放动画。
alternate：奇数次正常播放，偶数次向后播放。
normal：默认值，动画应该正常播放。

语法：animation-play-state：paused|running；说明：定义动画正在播放还是暂停。可用于JavaScript中。

3.1. 弹性盒

弹性盒是css3中的一种新的布局模式。是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器和弹性子元素组成。弹性容器通过设置display属性的值flex将其定义为弹性容器。弹性容器内包含了一个或多个子元素。

主轴(main axis):伸缩容器的主轴，伸缩项目主要沿着这条轴进行排列布局。小心，它不一定是水平的; 这主要取决于“justify-content”属性。

主轴起点(main-start)和主轴终点(main-end) :伸缩项目放置在伸缩容器内从主轴起点(main-start) 向主轴终点(main-start) 方向。

主轴尺寸(main-size):伸缩项目在主轴方向的宽度或高度就是主轴的尺寸。伸缩项目主要的大小属性要么是宽度，要么是高度属性，由哪一个对着主轴方向决定。

侧轴(cross axis) :垂直于主轴称为侧轴。它的方向主要取决于主轴方向。

侧轴起点(cross-start) 和侧轴终点(cross-end) :伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。

侧轴尺寸(cross size) :伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是I width」或「height」属性，由哪一个对着侧轴方向决定。

由于flexbox是一个整体模块，而不是单一的一个属性，它涉及到了很多东西，包括它的整个属性集。它们之中有一些是在父容器上设置，而有一些则是在子容器上设置。

以下属性设在容器上:display、 flex-direction 、flex-wrap、flex-flow、justify-content、align-items、align-content

语法：display：flex|inline-flex;
说明：弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器。
flex：将对象作为弹性伸缩盒展示。
inline-flex：将对象作为内联块级弹性收缩盒显示。

语法：flex-direction: row|row-reverse|column|column-reverse;
说明：设置伸缩盒主轴的起点和终点位置，子元素依然按照从主轴起点向终点排列。
row：默认位置，主轴横向，起点在左侧，终点在右侧。
row-reverse：主轴横向反转，起点在右侧，终点在左侧。
column：主轴纵向，起点在上方，终点在下方。
column-reverse：主轴纵向反转，起点在上方，终点在下方。

语法：flex-wrap:nowrap|wrap|wrap-reverse;说明：设置或检索伸缩盒对象的子元素超出父容器时是否换行。
nowrap：当子元素溢出父容器时不换行。wrap：当子元素溢出父容器时自动换行。wrap-reverse：反转wrap排列。

语法：justify-content:flex-start|flex-end|center|space-between|space-around
说明：设置或检索弹性盒子元素在主轴方向上的对齐方式。
flex-start:弹性盒子元素将向行起始位置对齐。flex-end：弹性盒子元素将向行结束位置对齐。
center：弹性盒子元素将向行中间位置对齐。space-between：弹性盒子元素会平均的分布在行里。
space-around：弹性盒子元素会平均的分布在行里，两端保留子元素与子元素之间间距大小的一半。