骰子是一種游戲中常用的擲骰子方式，可以通過(guò)CSS3來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的骰子效果。

.dice {
width: 50px;
height: 50px;
border: 1px solid #000;
text-align: center;
line-height: 50px;
font-weight: bold;
font-size: 28px;
border-radius: 10px;
position: relative;
perspective: 700px;
}
.dice:hover {
transform: rotateX(360deg) rotateY(360deg);
}
.dice:before,
.dice:after {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #000;
}
.dice:before {
left: 5px;
top: 5px;
}
.dice:after {
right: 5px;
bottom: 5px;
}
.dice span {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

代碼功能解釋?zhuān)?/p>

1. 通過(guò)設(shè)置樣式`.dice`的`width`和`height`屬性，確定骰子的大小。
2. `border`屬性設(shè)置骰子邊框的樣式。
3. 設(shè)置樣式`text-align`和`line-height`屬性，使骰子中的數(shù)字垂直居中。
4. `font-weight`和`font-size`屬性設(shè)置骰子中數(shù)字的樣式。
5. `border-radius`屬性給骰子添加圓角。
6. `position:relative`屬性為后面的`perspective`屬性做準(zhǔn)備。
7. `perspective`屬性給骰子添加3D效果。
8. `:hover`選擇器設(shè)置當(dāng)鼠標(biāo)指針懸停在骰子上時(shí)，骰子進(jìn)行旋轉(zhuǎn)。
9. `:before`和`:after`偽元素為骰子不同的面分別添加兩個(gè)黑色圓點(diǎn)。
10. `span`元素用于放置骰子中的數(shù)字，通過(guò)設(shè)置其`position`屬性為`absolute`和`z-index`屬性為`1`使其覆蓋在偽元素之上。

實(shí)現(xiàn)效果：