console 命令行工具 X clear

console

let box = document.querySelector(".box")

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)" //六
            ]

box.addEventListener("click",function(){
    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>
</body>
<html>

*{
    margin: 0;
    padding: 0;
}

.box{
    width: 400px;
    height: 400px;
    /* background-color: #87ceeb; */
    font-size: 300px;
    /* line-height: 400px; */
    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; */
}

@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%
}

.point{
    width: 30%;
    height:30%;
    border-radius:50%;
    background-color: black; 
}

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