3D骰⼦（⽰例代码）
flex-start(默认值)：左对齐
flex-end：右对齐
flex布局对齐方式center ：居中
space-between：两端对齐，项⽬间隔相同
space-around：每个项⽬两侧的间隔相等，中间的项⽬会⽐两边的项⽬间隔多⼀倍
1.1.5 align-items：决定项⽬在交叉轴上如何对齐，在flex-direction默认row情况下垂直对齐
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start：交叉轴起点对齐
flex-end：交叉轴终点对齐
center ：居中
baseline ：项⽬第⼀⾏⽂字的基线对齐
stretch(默认值)：如果项⽬未设置⾼度或设为auto，将拉伸占满整个容器的⾼度
1.1.6 align-content：定义了多根轴线的对齐⽅式。如果项⽬只有⼀根轴线，该属性不起作⽤，即项⽬存在多⾏或者多列时才有作⽤。.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start(默认值)：交叉轴起点对齐
flex-end：交叉轴终点对齐
center ：居中
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等
1.2 flex布局的实例——骰⼦的六个⾯
1.2.1 html布局
1.2.2 css样式
/*骰⼦点数布局*/
.box{
box-sizing: border-box;
padding: 10px;
width: 100px;
height: 100px;
border-radius: 10px;
background: #fff;
display: flex;
box-shadow: 0 0 10px #000 inset; }
.box1{
justify-content: center;
align-items: center;
}
.box2{
flex-direction: column;
justify-content: space-between; align-items: center;
}
.
box3{
flex-direction: row;
justify-content: space-between; align-items: flex-start;
}
.item{
display: inline-block;
width: 15px;
height: 15px;
border-radius: 15px;
background: #000;
order: auto;
}
.box3 .item:nth-child(2){
align-self: center;
}
.box3 .item:nth-child(3){
align-self: flex-end;
}
.box4,.box5,.box6{
flex-wrap: wrap;
justify-content: space-between;
Y：以⽅框y轴，从左向右旋转
Z：以⽅框中⼼为原点，顺时针旋转
2.1.3 3D透视——transform-style和perspective
transform-style: preserve-3d规定被嵌套元素如何在 3D 空间中显⽰，如果不设置该属性，则⽆3D效果。需要设置在⽗元素中，并且⾼于任何嵌套的变形元素。
perspective， 规定 3D 元素的透视效果。简单来说，perspective设置了⽤户和元素3D空间Z平⾯之间的距离，值越⼩，⽤户与3D空间Z 平⾯距离越近，视觉效果越明显；反之，值越⼤，⽤户与3D空间Z平⾯距离越远，视觉效果越不明显。
2.2 transform 3D实例——骰⼦的⽴体效果
2.2.1 ⽗元素，⼦元素定位
⽗元素设有transform-style属性，position设为relative，⼦元素的position设为absolute
.mf-box{
box-sizing: border-box;
width: 100px;
height: 100px;
margin: 0 auto;
perspective: 400px;
transform-style: preserve-3d;
position: relative;
transform: rotateX(30deg)rotateY(30deg);/*旋转⼀定⾓度⽅便观察*/
}
.mf-box .box{
position: absolute;
width: 100px;
height: 100px;
opacity: 0.8;/*设置每个⾯的透明度*/
}
2.2.2 ⼦元素变换位置
position:absolute让每个⾯先在同⼀个位置，然后再rotate()旋转translate位移。
位移的原点在元素的中⼼，上下两个⾯ 沿X轴旋转⼀定⾓度，沿Z轴位移⼀定像素；前后左右四个⾯ 沿Y轴旋转⼀定⾓度，沿Z轴位移⼀定像素。
注意：先旋转再位移和先位移再旋转的结果不同。先旋转再位移，位移是相对于旋转之后的坐标轴确定位置；先位移再旋转，位移是相对于旋转前的坐标轴确定位置。
.mf-box .box1{
transform: rotateY(0)translateZ(50px);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。