骰子動畫是一種很酷的效果，而CSS可以輕松地實現它！

/* 骰子面的樣式 */
.face {
position: absolute;
width: 100%;
height: 100%;
border: 2px solid black;
box-sizing: border-box;
font-size: 5rem;
text-align: center;
}
/* 每個骰子的樣式 */
.dice {
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
animation: roll .5s infinite;
}
/* 骰子旋轉的關鍵幀動畫 */
@keyframes roll {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: rotateX(1080deg) rotateY(1440deg) rotateZ(720deg);
}
}
/* 骰子的六個面 */
.dice .face1 {
transform: translateZ(50%);
}
.dice .face2 {
transform: rotateY(90deg) translateZ(50%);
}
.dice .face3 {
transform: rotateY(-90deg) translateZ(50%);
}
.dice .face4 {
transform: rotateX(-90deg) translateZ(50%);
}
.dice .face5 {
transform: rotateX(90deg) translateZ(50%);
}
.dice .face6 {
transform: rotateY(180deg) translateZ(50%);
}

如上代碼所示，首先要定義骰子面的樣式，也就是每個面的樣式，骰子樣式可以設置為相對定位，透視為1000px，3D保持樣式，然后使用CSS動畫來實現旋轉效果，關鍵幀也已經定義好了，最后就是定義每個面的位置，以及旋轉角度等屬性即可。