立体骰子实现3D炫酷旋转效果（附完整源码）（附动画代码）

整体思路：首先搭建骰子整体的立方体

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>