CSS3 骰子翻滾

在 CSS3 中，我們可以使用動畫來制作骰子的翻滾效果。下面是一個簡單的例子：

.dice {
width: 70px;
height: 70px;
border: 1px solid #000;
position: relative;
}
.dice span {
display: block;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}
.dice .face1 {
background: #fff url(dice1.png) no-repeat center center;
}
.dice .face2 {
background: #fff url(dice2.png) no-repeat center center;
}
...
@keyframes roll {
0% {
transform: translateX(0) rotateX(0) rotateY(0);
opacity: 0;
}
10% {
transform: translateX(80px) rotateX(-360deg) rotateY(0);
opacity: 1;
}
...
100% {
transform: translateX(0) rotateX(-720deg) rotateY(-720deg);
opacity: 0;
}
}
.roll {
animation: roll 2s ease-out;
animation-fill-mode: forwards;
}

在 CSS 中，我們首先定義了一個骰子的容器，并設置它的寬度、高度和邊框。然后定義了一個各個面的 `` 元素，并將它們設置為絕對定位。最后，使用 `@keyframes` 定義了一個名為 `roll` 的動畫，通過變換屬性實現(xiàn)了骰子的翻滾效果。

我們可以在 JavaScript 中通過 `classList` 屬性來給骰子容器添加或移除 `roll` 類名，從而激活或取消動畫效果：

var dice = document.querySelector('.dice');
dice.classList.add('roll');
setTimeout(function() {
dice.classList.remove('roll');
}, 2000);

這樣，我們就可以通過 CSS3 動畫來實現(xiàn)一個帶有翻滾效果的骰子了。