详解flex布局做骰子案例
上次案例用到了css3的3D特效，3D特效做正方体也是很常用的，所有我想到了利用css3做一个骰子，而骰子每一面的点数利用定位做起来很麻烦，利用css3的flex布局是很方便的，这次来看看如何利用flex弹性盒子的一些属性完成骰子点数的布局~
首先，建立一个3D空间元素，做成正方体，是上一篇中详细介绍过如何创建一个3D空间元素，这里就不细说了~实现一个正方体的原理是，在一个父元素中包含六个子元素，transform:rotate和translate来转变好每一个的面，在编写过程中，以下是我觉得对视觉效果有很好体验的一些细节：1、视距设置在body中，值给大一些。2、背景为黑色，骰子的每一面边框带一些圆角和内阴影。以下是我做出一个正方体的效果。
正方体创建好后，到了这次的重点–利用弹性盒子flex的一些属性来布局每一面的点数。
首先在每一面中创建对应的div个数，并给每一面的div设置display:flex;和flex-wrap:wrap;（弹性盒子中元素在必要时换行）样式
点数1
第一面只有一个子div，所以只需将其中心对齐就好了。设置justify-content: center;（元素在弹性盒子主轴中心开始排列）和 align-items: center;（元素在弹性盒子交叉轴中心开始排列），就可以实现水平垂直对称了。部分代码如下
.father1{
justify-content: center;
align-items: center;
}
点数2
第二面两个元素首先设置主轴元素两侧的间距相等排列，再将第二个元素靠交叉轴终点排列。部分代码如下
.father2{
justify-content: space-around;
}
.father2 .son:nth-child(2){
align-self:flex-end;
}
点数3
第三面三个元素首先设置主轴元素两侧的间距相等排列，再将第二个元素靠交叉轴中心排列，第三个元素靠交叉轴终点排列，部分代码如下
.father3{
justify-content: space-around;
}
.father3 .son:nth-child(2){
align-self:center;
}
.father3 .son:nth-child(3){
align-self:flex-end;
}
点数4
第三面两个元素一排并且都是靠垂直居中些排列，这里我设置主轴元素两侧的间距相等排列，由于元素在一列排不下会自动换行，所以增大每个元素外边距就实现效果了，部分代码如下
.father4{
justify-content:space-around;
}
.father4 .son{
margin: 25px;
}
点数5
第五面在子元素创建时分别创三个div里面分别放2、1、2div，设置主轴元素两侧的间距相等排列，设置盒子元素纵向排列，将面底下的三个div设为弹性盒子，第一、三个div设置主轴元素两侧的间距相等排列，第二个div设置主轴元素靠中心排列，部分代码如下
.father5{
justify-content: space-around;
flex-direction: column;
}
.father5>div{
display: flex;
}
.five_1{
justify-content: space-around;
}
.five_2{
justify-content: center;
}
.five_3{
justify-content: space-around;
}
点数6
第五面在子元素创建时分别创三个div里面分别放2、1、2div，设置主轴元素两侧的间距相等排列，设置盒子元素纵向排列，将面底下的三个div设为弹性盒子设置主轴元素两侧的间距相等排列，和盒子元素横向排列，部分代码如下
.father6{
flex-direction:column;
justify-content: space-around;
}
.father6>div{
display: flex;
flex-direction:row;
justify-content:space-around;
}
再给骰子用animation属性加一个自动旋转的效果，就更加炫酷啦，示例图和完整代码如下。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding:0px;
}
body{
perspective:8000px;
background-color: black;
}
.big{
position: relative;
top: 300px;
left: 400px;
width: 200px;
height: 200px;
/* border: 1px solid red; */
transform-style: preserve-3d;
transform:rotateX(180deg);
/* transform:rotatey(90deg); */
/* transition:all 10s linear; */
animation: run 10s linear 0s infinite;
}
/* .big:hover{
transform:rotateX(180deg) rotatey(180deg) rotatez(180deg);
} */
@keyframes run {
0%{
transform:rotateX(0deg) rotatey(0deg) rotatez(0deg);
}
100%{
transform:rotateX(180deg) rotatey(180deg) rotatez(180deg);
}
}
.father{
position: absolute;
width: 200px;
height: 200px;
display: flex;
flex-wrap:wrap;
border-radius: 30px;
box-shadow: 0px 0px 10px 10px #fff inset;
background-color: #EEE;
/* padding: 10px; */
}
.son{
width: 50px;
height: 50px;
border-radius: 25px;
background-color: black;
/* margin: 25px; */
}
/* 第一个面 */
.father1{
transform:rotateX(-90deg) translatez(-100px);
justify-content: center;
align-items: center;
}
.father1 .son{
background-color: brown;
}
/* 第六个面 */
.father6{
transform:rotateX(-90deg) translatez(100px);
flex-direction:column;
justify-content: space-around;
}
.father6>div{
display: flex;
flex-direction:row;
justify-content:space-around;
}
/* 第二个面 */
.father2{
transform:rotateY(-90deg) translatez(100px);
justify-content: space-around;
}
.father2 .son:nth-child(2){
/* background-color: brown; */
align-self:flex-end;
}
/* 第五个面 */
.father5{
transform:rotateY(-90deg) translatez(-100px);
justify-content: space-around;
flex-direction: column;
}
.father5>div{
display: flex;
}
.father5 .son{
margin: 0px;
}
.five_1{
justify-content: space-around;
}
.five_2{
justify-content: center;
}
.five_3{
justify-content: space-around;
}
/* 第三个面 */
.father3{
transform: translatez(100px);
justify-content: space-around;
/* align-content:space-between; */
}
.father3 .son{
margin: 0px;
}
.father3 .son:nth-child(2){
align-self:center;
}
.father3 .son:nth-child(3){
align-self:flex-end;
}
/* 第四个面 */
.father4{
transform: translatez(-100px);
justify-content:space-around;
/* align-content:space-around; */
}
.father4 .son{
margin: 25px;
}
</style>
</head>
<body>
<div class="big">
<div class="father father1">
<div class="son son1"></div>
</div>
<div class="father father2">
<div class="son"></div>
<div class="son"></div>
</div>
<div class="father father3">
<div class="son son1"></div>
<div class="son son1"></div>
<div class="son son1"></div>
</div>
<div class="father father4">
<div class="son son1"></div>
<div class="son son1"></div>
<div class="son son1"></div>
<div class="son son1"></div>
</div>
<div class="father father5">
<div class="five_1">
<div class="son"></div>
<div class="son"></div>
</div>
<div class="five_2">
<div class="son"></div>
</div>
<div class="five_3">
<div class="son"></div>
<div class="son"></div>
</div>
</div>
<div class="father father6">
<div class="six_1">
<div class="son"></div>
<div class="son"></div>
</div>
<div class="six_2">
<div class="son"></div>
<div class="son"></div>
</div>
<div class="six_3">
<div class="son"></div>
<div class="son"></div>
</div>
</div>
</div>
</body>
</html>
css3的flex布局做骰子效果就实现啦，对你有帮助的话点个赞支持下哦~
