整体思路：首先搭建骰子整体的立方体
1.先搭建前后两个面(front和back)，通过定位（子绝父相）将两个盒子定位在立方体正面，此时一面遮挡了另一面，在父盒子中添加transform-style: preserve-3d;达到3d立体效果，将前盒子沿z轴正方向移动高一半距离，后盒子沿z轴负方向移动高一半距离，前后盒子搭建完成，可搭配hover和过渡查看效果；
2.左右盒子与步骤1类似，不过左右盒子是需要进行左右移动高一半距离，且需要绕Z轴转动；
3.与左右盒子搭建类似，需要绕X轴转动，需要沿Y轴上下移动
4.在每个面添加骰子的点数，在front面，给front新加display: flex;（flex布局） justify-content: center;（主轴水平居中）align-items: center;（侧轴居中），子盒子为point，此时在front面正中间位置；
5.在back面，设置点数为2：给back添加flex布局，设置align-items: center;（侧轴居中），justify-content: space-evenly;（弹性容器、弹性盒子之间的间隙相等），在back中放置两个point盒子即可；
6.在left面设置3点：3个点可分为上中下三个盒子，给left添加flex布局，上面的盒子可以利用justify-content: flex-end;实现右上方对齐，中间盒子居中justify-content: center;align-items: center;，下面盒子justify-content: flex-start;左侧对齐，与盒子间距可通过给子盒子添加margin或给父盒子添加padding，其他的点也是类似步骤，完整代码如下：
* {margin: 0;padding: 0;box-sizing: border-box;}/* 红点 */.point {width: 15px;height: 15px;background-color: red;border-radius: 50%;}/* 骰子立方体样式 */.touzi {position: relative;width: 100px;height: 100px;margin: 100px auto;/*3d立体效果*/transform-style: preserve-3d;/* hover的过渡 */transition: all 3s;/* 动画-转动骰子 *//* animation: move 3s infinite; */}/* 立方体六个面 */.front,.back,.left,.right,.under,.above {position: absolute;left: 0;top: 0;width: 100px;height: 100px;background-color: rgba(0, 0, 0, .1);border-radius: 10px;}/* 正面1点 */.front {display: flex;justify-content: center;align-items: center;/* background-color: skyblue; */transform: translateZ(50px);}/* 后面 2点*/.back {display: flex;justify-content: space-evenly;align-items: center;/* background-color: rgb(10, 7, 14); */transform: translateZ(-50px);}/* 左侧3点 */.left {display: flex;justify-content: center;align-items: center;/* background-color: blue; */padding: 10px 10px;transform: translateX(-50px) rotateY(-90deg);}.left .box {width: 100%;}.left .box .top {display: flex;justify-content: flex-end;margin-bottom: 5px;}.left .box .content {display: flex;justify-content: center;align-items: center;}.left .box .bottom {display: flex;justify-content: flex-start;}/* 右侧4点样式 */.right {display: flex;justify-content: center;align-items: center;/* background-color: pink; */transform: translateX(50px) rotateY(90deg);}.right .box {width: 100%;}.right .box .top,.right .box .bottom {display: flex;justify-content: space-evenly;width: 100%;}.right .box .top {margin-bottom: 15px;}/* 顶部6点 */.above {display: flex;justify-content: space-evenly;align-items: center;/* background-color: green; */transform: translateY(-50px) rotateX(90deg);}.above .box {width: 100%;}.above .top,.above .content,.above .bottom {display: flex;justify-content: space-evenly;align-items: center;}.above .content {margin: 10px 0;}/* 底面5点 */.under {display: flex;justify-content: center;align-items: center;/* background-color: #d4f73a; */transform: translateY(50px) rotateX(-90deg);}.under .box {width: 100%;}.under .box .top,.under .box .bottom {display: flex;justify-content: space-evenly;width: 100%;}.under .box .content {display: flex;justify-content: center;margin: 5px 0;}/* 当鼠标放到骰子上时，触发转动 */.touzi:hover {/* 绕Y轴旋转 */transform: rotateY(360deg);/* 绕X轴旋转 *//* transform: rotateX(360deg); */}/* @keyframes move {20% {transform: rotateX(360deg);}40% {transform: rotateY(360deg);}60% {transform: rotateX(360deg);}80% {transform: rotateY(360deg);}} */
<div class="touzi"><!-- 正面1点 --><div class="front"><div class="point"></div></div><!-- 后面2点 --><div class="back"><div class="point"></div><div class="point"></div></div><!-- 左侧3点 --><div class="left"><div class="box"><div class="top"><div class="point"></div></div><div class="content"><div class="point"></div></div><div class="bottom"><div class="point"></div></div></div></div><!-- 右侧4点 --><div class="right"><div class="box"><div class="top"><div class="point"></div><div class="point"></div></div><div class="bottom"><div class="point"></div><div class="point"></div></div></div></div><!-- 底面5点 --><div class="under"><div class="box"><div class="top"><div class="point"></div><div class="point"></div></div><div class="content"><div class="point"></div></div><div class="bottom"><div class="point"></div><div class="point"></div></div></div></div><!-- 顶部6点 --><div class="above"><div class="box"><div class="top"><div class="point"></div><div class="point"></div></div><div class="content"><div class="point"></div><div class="point"></div></div><div class="bottom"><div class="point"></div><div class="point"></div></div></div></div></div>
