整体思路：首先搭建骰子整体的立方体
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;?
开通VIP 解锁文章