骰子是常見(jiàn)的游戲道具，那么如何用css來(lái)制作一個(gè)骰子呢？下面是一個(gè)實(shí)際的實(shí)現(xiàn)代碼。

/* 骰子背景 */
.dice {
width: 100px;
height: 100px;
perspective: 200px;
}
/* 骰子的內(nèi)部構(gòu)造 */
.dice div {
position: absolute;
width: 100px;
height: 100px;
background-color: white;
border: 1px solid black;
box-sizing: border-box;
text-align: center;
line-height: 100px;
font-size: 50px;
font-weight: bold;
}
/* 骰子正面 */
.front {
transform: translateZ(50px);
}
/* 骰子后面 */
.back {
transform: rotateX(180deg) translateZ(50px);
}
/* 骰子頂面 */
.top {
transform: rotateX(-90deg) translateZ(50px);
}
/* 骰子底面 */
.bottom {
transform: rotateX(90deg) translateZ(50px);
}
/* 骰子左側(cè)面 */
.left {
transform: rotateY(-90deg) translateZ(50px);
}
/* 骰子右側(cè)面 */
.right {
transform: rotateY(90deg) translateZ(50px);
}

以上是骰子的css代碼，接下來(lái)看一下html代碼，如下：

1
6
2
5
4
3

以上這些代碼一起，就可以制作一個(gè)簡(jiǎn)單的3D骰子。當(dāng)然，你也可以根據(jù)自己的需求進(jìn)行修改和拓展，制作出更加炫酷的效果。