css3添加动画-弹性盒

transfrom向元素添加2D或3D转换

给元素添加transfrom属性

tanrslate（x，y）     添加2d位移
tanrslate3d（x，y）   添加3d位移
tanrslateX（x）       x方向添加位移
tanrslateY（y）       y方向添加位移
tanrslateZ（z）       z方向添加位移
scale(xy)  	         定义 2D 缩放转换
rotate(angle)        定义 2D 旋转
rotate3d     	     定义 3D 旋转。

弹性盒

给盒子设置属性 display:flex/inline-flex将原本的盒模型改成弹性盒模型;

flex-direction   属性规定灵活项目的方向。横着排还是竖着排  还是反着排
	row           默认排列  1234
	row-reverse   默认的反向 4321
	column        竖着排
	initial       设置该属性为它的默认值。
	inherit       从父元素继承


flex-wrap            用于设置伸缩项目（子元素）在主轴上的换行方式
	nowrap           默认值。规定灵活的项目不拆行或不拆列。
	wrap             规定灵活的项目在必要的时候拆行或拆列。
	wrap-reverse     规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
 

 justify-content    用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
	flex-start      默认值。项目位于容器的开头。
	flex-end        项目位于容器的结尾。
	center          项目位于容器的中心。
	space-between   项目位于各行之间留有空白的容器内。
	space-around    项目位于各行之前、之间、之后都留有空白的容器内。

align-items     定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
	stretch     元素被拉伸以适应容器。
	center      元素位于容器的中心。
	flex-start  元素位于容器的开头。
	flex-end    元素位于容器的结尾。
	baseline    元素位于容器的基线上。


align-content：用于设置多行子元素在容器侧轴上的对齐方式(多行时才有效)；
	auto        默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
	center      元素位于容器的中心。
	flex-start  元素位于容器的开头。
	flex-end    元素位于容器的结尾。各行向弹性盒容器的结束位置堆叠。
	space-between  元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布
	space-around   元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。


align-self：属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

flex  属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex  属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。