console 命令行工具 X clear

console

let button = document.querySelector("button")

face_list=["rotateX(360deg) rotateY(360deg)", //一
            "rotateX(360deg) rotateY(90deg)",  //二
            "rotateX(360deg) rotateY(180deg)", //三
            "rotateX(360deg) rotateY(270deg)", //四
            "rotateX(270deg) rotateY(360deg)",//五
            "rotateX(90deg) rotateY(360deg)" //六
            ]

button.addEventListener("click",function(){
    document.querySelectorAll(".box").forEach(function(boxObj){
        boxObj.style.animation=`dice 0.5s alternate running`;
        boxObj.addEventListener("animationend",function(){
        boxObj.style.transform=`${face_list[Math.floor(Math.random()*6)]}`;
        boxObj.style.animation=``;
    })
    })
    // box.style.animation=`dice 0.5s alternate running`;
    // box.addEventListener("animationend",function(){
    //     box.style.transform=`${face_list[Math.floor(Math.random()*6)]}`;
    //     box.style.animation=``;
    // })
})
// Math.floor(Math.random()*6)

<html>
<body>
    <div class="box">
        <div class="face front">
            <div class="point"></div>
        </div>
        <div class="face left">
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="face back">
            <div class="point"></div>
            <div class="point" style="align-self: center"></div>
            <div class="point" style="align-self: flex-end"></div>
        </div>
        <div class="face right">
            <div class="point"></div>
            <div class="point"></div>
            <hr style="width:100%; border:0">
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="face top">
            <div class="point"></div>
            <div class="point"></div>
            <div class="mid"><div class="point"></div></div>
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="face bottom">
            <div class="point"></div>
            <div class="point"></div>
            <div class="mid">
                <div class="point"></div>
                <div class="point"></div>
            </div>
            <div class="point"></div>
            <div class="point"></div>
        </div>
    </div>
    <div class="box">
        <div class="face front">
            <div class="point"></div>
        </div>
        <div class="face left">
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="face back">
            <div class="point"></div>
            <div class="point" style="align-self: center"></div>
            <div class="point" style="align-self: flex-end"></div>
        </div>
        <div class="face right">
            <div class="point"></div>
            <div class="point"></div>
            <hr style="width:100%; border:0">
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="face top">
            <div class="point"></div>
            <div class="point"></div>
            <div class="mid"><div class="point"></div></div>
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="face bottom">
            <div class="point"></div>
            <div class="point"></div>
            <div class="mid">
                <div class="point"></div>
                <div class="point"></div>
            </div>
            <div class="point"></div>
            <div class="point"></div>
        </div>
    </div>
    <div class="box">
        <div class="face front">
            <div class="point"></div>
        </div>
        <div class="face left">
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="face back">
            <div class="point"></div>
            <div class="point" style="align-self: center"></div>
            <div class="point" style="align-self: flex-end"></div>
        </div>
        <div class="face right">
            <div class="point"></div>
            <div class="point"></div>
            <hr style="width:100%; border:0">
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="face top">
            <div class="point"></div>
            <div class="point"></div>
            <div class="mid"><div class="point"></div></div>
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="face bottom">
            <div class="point"></div>
            <div class="point"></div>
            <div class="mid">
                <div class="point"></div>
                <div class="point"></div>
            </div>
            <div class="point"></div>
            <div class="point"></div>
        </div>
    </div>
    <div class="box">
        <div class="face front">
            <div class="point"></div>
        </div>
        <div class="face left">
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="face back">
            <div class="point"></div>
            <div class="point" style="align-self: center"></div>
            <div class="point" style="align-self: flex-end"></div>
        </div>
        <div class="face right">
            <div class="point"></div>
            <div class="point"></div>
            <hr style="width:100%; border:0">
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="face top">
            <div class="point"></div>
            <div class="point"></div>
            <div class="mid"><div class="point"></div></div>
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="face bottom">
            <div class="point"></div>
            <div class="point"></div>
            <div class="mid">
                <div class="point"></div>
                <div class="point"></div>
            </div>
            <div class="point"></div>
            <div class="point"></div>
        </div>
    </div>
    <div class="box">
        <div class="face front">
            <div class="point"></div>
        </div>
        <div class="face left">
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="face back">
            <div class="point"></div>
            <div class="point" style="align-self: center"></div>
            <div class="point" style="align-self: flex-end"></div>
        </div>
        <div class="face right">
            <div class="point"></div>
            <div class="point"></div>
            <hr style="width:100%; border:0">
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="face top">
            <div class="point"></div>
            <div class="point"></div>
            <div class="mid"><div class="point"></div></div>
            <div class="point"></div>
            <div class="point"></div>
        </div>
        <div class="face bottom">
            <div class="point"></div>
            <div class="point"></div>
            <div class="mid">
                <div class="point"></div>
                <div class="point"></div>
            </div>
            <div class="point"></div>
            <div class="point"></div>
        </div>
    </div>
    <button style="width:100%;margin-top:50px; padding:0 200px;">点击摇骰</button>
</body>
<html>

*{
    margin: 0;
    padding: 0;
}
body{
    width: 60%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.box{
    width: 100px;
    height: 100px;
    margin-top:30px; 
    /* text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto; */
    transform-style: preserve-3d;
    transition: all 0.3s;
    /* animation: dice 0.5s alternate running; */
    transform: rotateX(90deg) rotateY(360deg);
}

@keyframes dice{
    from{
        transform: rotateX(0deg) rotateY(0deg);
    }
    to{
        transform: rotateX(1080deg) rotateY(1080deg);
    }
}

.face{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: peachpuff;
}

.point{
    width: 30%;
    height:30%;
    border-radius:50%;
    background-color: rgba(8, 74, 218, 0.966); 
}

.front{
    transform: translateZ(50px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.left{
    display: flex;
    align-items: center;
    justify-content: space-around;
    transform: rotateY(-90deg) translateZ(50px);
}
.back{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    transform: rotateY(180deg) translateZ(50px);
}
.right{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    transform: rotateY(90deg) translateZ(50px);
}
.top{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    transform: rotateX(90deg) translateZ(50px);
}
.bottom{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    transform: rotateX(-90deg) translateZ(50px);
}
.mid{
    width:100%;
    height:30%;
    display:flex;
    align-content: center;
    justify-content: space-around;
}
.mid .point{
    height:100%;
}