day-16

一、CSS3的3D场景的设置

/* 让物体实现3D效果 */

1、transfom-style；flat preserve-3D

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

B、preserve-3D：表示所有子元素在3D空间呈现。

C、注意：trransform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素。

2、perspective：200px；景深 眼睛视线的距离。

 /* 设置物体景深/可以让物体实现近大远小的效果 */

       transform: perspective(300px); 设置数值越大视线的距离越远，数值越小视线的距离越近。

3、perspective-origin 是3D变形中另一个重要属性，主要用来决定perspective属性的远点角度。

4、backface-visibility属性

backface-visibility属性决定元素旋转背面是否可见。对于未旋转的元素，该元素的正面面向观看者。当其Y轴旋转约180度时会导致元素的背面面对观众。

语法：backface-visibility：visible hidden

visible：为backface-visibility的默认值，表示反面可见

hidden：表示反面不可见

二、动画animation

1、animation--name：mymove

是用来定义个动画的名称；mymove是由Keyframes创建的动画名 mymove要和keyframes中的mymove一致

2、animation-duration 运动时间 默认是0s

3、animation-dalay 延迟时间 默认是0s

4、animation-timing-function 动画的播放方式，具有一下六种变换方式：

ease;

ease-in

ease-in-out

;inear;

cubic-bezier，

steps（)； 

5、animation-iteration-conunt 是用来指定元素播放动画的循环次数，其可以取值<number>为数字，其默认值“1”infinite为无线次数循环。

6、animation-diection 定义是否应该轮流反向播放动画

如果animation-direction值是“alternate”，则动画会在期数次数（1、3、5等等）正常播放，

而在偶数次数（2、4、6等等）向后播放

animation和transition的区别：

相同点：

都是随着时间改变元素的属性值。

不同点：

1、transition需要触发一个事件（hover事件或click事件等）才会随时间改变其CSS属性；

2、而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。 

三、CSS3 弹性盒

1、怪异盒模型：

border-box（按怪异盒模型的规则解析）

为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 

border-box（设置的数值超过盒子原本的数值会失效）

2、弹性盒模型：

A、display：flex/inline-flex

说明：flex：将对象作为弹性伸缩盒显示。

linline-flex：将对象作为内联块级弹性伸缩盒显示

设置为弹性盒（父元素添加）

B、flexdirection（主轴排列方向）

说明：顺序指定了弹性子元素在父容器中的位置

row 默认横向一行内排列

row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

column 纵向排列

column-reverse：反转纵向排列，从下往上排，最后一项排在最上面

C、justify-content（主轴对齐方式)

说明：

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

1、flex-star 默认值，主轴顶端对齐。

2、flex-end主轴末端对齐

3、center主轴居中对齐

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

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

6、space-evenly平均分配空白空间

D、align-items（侧轴对齐方式）

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

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

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

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

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

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

E、flex-wrap

说明：

该属性控制伸缩容器当内容超出容器的尺寸时是否换行，同时侧轴的方向决定新航堆叠的方向。

nowrap：不换行

wrap：换行

wrap-reverse：反转换行排列。

F、align-content（行与行之间对齐方式）

说明：

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

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

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

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

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

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

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

space-evenly平均分配空白空间

G、align-self（加给子元素）

说明：

align-self 属性规定灵活容器内被选中项目的侧轴对齐方式

注意：align-self 属性可重写灵活容器的 align-items属性

auto 默认值。元素继承了他的如容器的align-items属性。如果没有父容器则为“strech”

stretch 元素被拉伸以适应容器侧轴的尺寸。

center 元素位于容器侧轴的中心

flex-start 元素位于容器的侧轴顶端

flex-end 元素位于容器的侧轴末端。

flex三个子属性介绍 ：

flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间也不放大  

flex-shrink 定义了项目的收缩比例，默认为1，即如果空间不足该项目将缩小。负值对该属性无效。

收缩量的计算方式：（元素宽度*收缩比例/元素*收比例    相加）*溢出宽度 flex-basis 项目的主轴方向的长度 

flex（flex-grow，flex-shrink、flex-basis） 

说明：

复合属性。设置或检索弹性盒模型对象的子元素如何分配剩余空间。

缩写「flex: 1」, 则其计算值为「1   1   %」

缩写「flex: auto」, 则其计算值为「1   1   auto」

flex: none」, 则其计算值为「0   0  auto」

flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值 

order 

说明： 控制伸缩项目的显示的顺序，数字越大越往后排，默认为0，支持负数，没有单位的整数值

 flex-flow  

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap;