之前面试有两家问到怎么使用flex进行骰子点数的排布，所以闲的没事自己就做一下（第一次搞，有问题可以指出来）
思路
- 先把两个面做出来，给点数排好位置，只要使用flex去进行布局
- 将所有面叠在一起进行旋转，让所有面的朝向正确
- 将所有面进行位移，留出空间
- 定义一个动画进行旋转
主要使用flex布局将点数布置好，在使用动画去进行旋转
<style>
body {
padding: 0;
margin: 0;
/* 给背景一个颜色方便观察骰子 */
background-color: aqua;
width: 100vw;
height: 100vh;
/* 将标签设置在正中间 */
display: flex;
align-items: center;
justify-content: center;
}
main {
width: 100px;
height: 100px;
display: flex;
/* 创造3d环境 */
transform-style: preserve-3d;
animation: move 10s linear infinite;
}
/* 添加动画，方便看各个面的点数 */
@keyframes move {
from {
transform: rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateY(360deg) rotateZ(360deg);
}
}
div {
/* 将所有面定位在一起，方便后续旋转 */
position: absolute;
width: 100px;
height: 100px;
box-shadow: 0 0 10px #999;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
/* 允许换行 为设置4 5 6点做准备 */
flex-wrap: wrap;
}
span {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: red;
}
.before {
transform: translateZ(50px);
}
.after {
flex-direction: column;
justify-content: space-around;
transform: rotateY(180deg) translateZ(50px);
}
.left {
padding: 10px;
box-sizing: border-box;
transform: rotateY(270deg) translateZ(50px);
}
.left span:nth-child(1) {
align-self: flex-start;
}
.left span:nth-child(3) {
align-self: flex-end;
}
.right {
transform: rotateY(90deg) translateZ(50px);
}
.top {
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
transform: rotateX(270deg) translateZ(50px);
}
nav {
width: 100%;
display: flex;
justify-content: space-around;
}
</style>
<body>
<main>
<div class="before">
<span></span>
</div>
<div class="after">
<span></span>
<span></span>
</div>
<div class="left">
<span></span>
<span></span>
<span></span>
</div>
<div class="right">
<nav>
<span></span>
<span></span>
</nav>
<nav>
<span></span>
<span></span>
</nav>
</div>
<div class="top">
<nav>
<span></span>
<span></span>
</nav>
<nav>
<span></span>
</nav>
<nav>
<span></span>
<span></span>
</nav>
</div>
<div class="bottom">
<nav>
<span></span>
<span></span>
</nav>
<nav>
<span></span>
<span></span>
</nav>
<nav>
<span></span>
<span></span>
</nav>
</div>
</main>
</body>
