3d和弹性盒子

3D变化需要⽗元素设置样式才能保留3d的变化效果
translate3d(x,y,z):必须传递三个参数
translateX(x) translateY(y) translateZ(z) 参数单位为px
x值：沿着x轴向右，为正；沿着x轴向左，为负
y值：沿着y轴向下，为正；沿着y轴向上，为负
z值：沿着z轴向屏幕外，为正；沿着z轴向屏幕内，为负
rotateX 为正则顺时针旋转，为负则为逆时针旋转
rotateY 为正则逆时针旋转，为负则顺时针旋转
rotateZ 为正则顺时针旋转，为负则为逆时针旋转
visible 背⾯可⻅
hidden 背⾯不可⻅
scale3d(num,num,num):必须要传三个参数
scaleX(x) scaleY(y) scaleZ(z) ,分别代表x和y轴⽅向缩放相应的倍数
参数为数字，⽆单位
⽐较麻烦，感兴趣的⾃⼰研究，了解即可
保留3d变化：transform-style：preserve-3d; 默认值flat
设置视⻆深度 （景深）：perspective [pə'spektiv] 设置当前⽹⻚的视距为800px，⼈眼距离⽹⻚的距离，⼀
般不⼩于600px
有的浏览器 html{perspective: 800px; },
⼤多浏览器直接设置在⽗元素上，例如：perspective：800-1200px；⼀般为900px-1000px
位移 translate3d translateX translateY translateZ
旋转 rotate3d rotateX rotateY rotateZ
rotateX(⻆度) rotateY(⻆度) rotateZ(⻆度) 沿着元素中⼼点穿过的某个轴旋设置的⻆度
参数⻆度单位为deg
⻆度值：
可以通过transform-origin：left来设置，⽐如绕着元素的左边框旋转
rotate3d（x,y,z,deg）:沿着⾃定义轴旋转deg为⻆度()
backface-visibility属性定义当元素旋转到背⾯向屏幕时，是否可⻅
缩放：scale3d scaleX scaleY scaleZ

flex( Flexible Box 弹性盒⼦，伸缩盒)
-要使⽤弹性盒，必须先将⼀个元素设置为弹性容器
-通过display来设置弹性容器
display:flex 设置块级弹性容器
display:inline-flex 设置为⾏内的弹性容器
-弹性容器的直接⼦元素是弹性元素（弹性项）
注意：⼀个元素可以同时是弹性容器和弹性元素
设置⽗元素flex后，⼦元素上的浮动，vertical-alin将失效
总结：通过设置⽗元素的弹性布局，调整⼦元素的对⻬⽅式和布局
容器默认存在两根轴：⽔平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置
（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，
结束位置叫做cross end。
项⽬默认沿主轴排列。单个项⽬占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

弹性盒⼦
Flex 布局是什么？
是css中的⼜⼀种布局⼿段，它主要⽤来代替浮动来完成⻚⾯的布局
flex可以使元素具有弹性，让元素可以根据⻚⾯的⼤⼩的改变⽽改变
弹性容器
弹性元素

⼆、基本概念
以下6个属性设置在容器上
三、容器的属性
序号 容器属性 作⽤ 属性值 示意图

flex-direction 决定主轴的⽅向
（即项⽬的排列⽅
向）
row（默认值）：
主轴为⽔平⽅
向，起点在左
端。
row-reverse：主
轴为⽔平⽅向，
起点在右端。
column：主轴为
垂直⽅向，起点
在上沿。
columnreverse：主轴为
垂直⽅向，起点
在下沿。
2 flex-wrap
决定如果⼀条轴线
排不下，是否换⾏
nowrap（默
认）：不换⾏。
wrap：换⾏，第
⼀⾏在上⽅。
wrap-reverse：
换⾏，第⼀⾏在
下⽅。
3 flex-flow
是flex-direction
属性和flex-wrap
属性的简写形式，
默认值为row

4 justify-content 定义了项⽬在主轴
上的对⻬⽅式（必
须要先确定好主轴
是哪个）
flex-start（默认
值）：左对⻬
flex-end：右对
⻬
center： 居中
spacebetween：两端对
⻬，项⽬之间的
间隔都相等。
space-around：
每个项⽬两侧的
间隔相等。所
以，项⽬之间的
间隔⽐项⽬与边
框的间隔⼤⼀
倍。
space-evenly:
项⽬是分布
的，以便任何
两个项⽬之间
的间距（和边
缘的空间）相
等。
5 align-items
定义项⽬在交叉轴
（侧轴）上如何对
⻬。
注意：该属性是控
制⼦项在侧轴（默
认是y轴）上的排
列⽅式，在⼦项上
为单项（单⾏）的
时候使⽤
flex-start：交叉
轴的起点对⻬。
flex-end：交叉
轴的终点对⻬。
center：交叉轴的
中点对⻬。
baseline: 项⽬的
第⼀⾏⽂字的基
线对⻬。
stretch（默认
值）：如果项⽬
未设置⾼度或设
为auto，将占满
整个容器的⾼
度。
6 align-content 定义了多根轴线的
对⻬⽅式（⼦项出
现换⾏的情况）
如果项⽬只有⼀根
轴线，该属性不起
作⽤。
flex-start：与交
叉轴的起点对
⻬。
flex-end：与交
叉轴的终点对
⻬。
center：与交叉轴
的中点对⻬。
spacebetween：与交叉
轴两端对⻬，轴
线之间的间隔平
均分布。
space-around：
每根轴线两侧的
间隔都相等。所
以，轴线之间的
间隔⽐轴线与边
框的间隔⼤⼀
倍。
stretch（默认
值）：轴线占满
以下6个属性设置在项⽬上。
整个交叉轴。
四、项⽬(弹性元素)的属性
序号 容器属性 作⽤ 属性值 示意图
1 order（*）
定义项⽬的排列顺
序。数值越⼩，排
列越靠前，默认为
0

2 flex-grow
定义项⽬的放⼤⽐
例，默认为0，即
如果存在剩余空
间，也不放⼤。

3 flex-shrink
定义了项⽬的缩⼩
⽐例，默认为1，
即如果空间不⾜，
该项⽬将缩⼩。

4 flex-basis 定义了在分配多余
空间之前，项⽬占
据的主轴空间
（main size）。
浏览器根据这个属
性，计算主轴是否

指屏幕的对⻆线⻓度，单位是英⼨（inch）。常⽤尺⼨有：3.5⼨、4.7⼨、5.0⼨、5.5⼨、6.0⼨等
备注：1英⼨（inch）=2.54厘⽶（cm）
指屏幕在：横向、纵向上所拥有的物理像素点总数，⼀般表示⽤n * m表示
有多余空间。它的
默认值为auto，即
项⽬的本来⼤⼩。

flex属性是flexgrow, flex-shrink
和 flex-basis的简
写，默认值为0 1
auto。后两个属性
可选。
定义了⼦项⽬分配
剩余空间，flex表
示占多少份数
6 align-self（*）
允许单个项⽬有与
其他项⽬不⼀样的
对⻬⽅式，可覆盖
align-items属
性。默认值为
auto，表示继承⽗
元素的alignitems属性。