CSS3是一種非常強大的技術，可以通過它來實現很多炫酷的效果，比如投骰子的動畫。下面我們就來介紹一下如何使用CSS3來實現投骰子的效果。

/*先定義一個骰子的樣式*/
.dice{
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
font-weight: bold;
}
/*定義動畫效果*/
@keyframes rolling{
0%{
transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
20%{
transform: translate3d(0, 0, 150px) rotateX(360deg) rotateY(720deg) rotateZ(360deg);
}
40%{
transform: translate3d(0, 0, 0) rotateX(720deg) rotateY(1440deg) rotateZ(720deg);
}
60%{
transform: translate3d(0, 0, 150px) rotateX(1080deg) rotateY(2160deg) rotateZ(1080deg);
}
80%{
transform: translate3d(0, 0, 0) rotateX(1440deg) rotateY(2880deg) rotateZ(1440deg);
}
100%{
transform: translate3d(0, 0, 150px) rotateX(1800deg) rotateY(3600deg) rotateZ(1800deg);
}
}
/*通過CSS來觸發動畫*/
.roll{
animation: rolling 2s ease-out;
}
/*最后，通過JS來添加樣式*/
var dice = document.querySelector('.dice');
dice.addEventListener('click', function(){
dice.classList.remove('roll');
void dice.offsetWidth;
dice.classList.add('roll');
});

通過上面的代碼，就可以實現一個投骰子的效果了。點擊骰子時，它就會開始旋轉，并在定時器時間結束時產生一個隨機數，這個數就是骰子的點數。