CSS3可以用來制作各種炫酷的效果，比如用它來制作一個平面的色子就非常簡單。

//HTML部分
<div class="cube">
<div class="face1"></div>
<div class="face2"></div>
<div class="face3"></div>
<div class="face4"></div>
<div class="face5"></div>
<div class="face6"></div>
</div>
//CSS部分
.cube {
width: 50px;
height: 50px;
position: relative;
}
.face1,
.face2,
.face3,
.face4,
.face5,
.face6 {
position: absolute;
width: 50px;
height: 50px;
}
.face1 {
background-color: green;
transform: rotateX(90deg);
top: 0;
left: 0;
}
.face2 {
background-color: yellow;
transform: rotateY(90deg);
top: 0;
left: 0;
}
.face3 {
background-color: red;
transform: rotateY(-90deg);
top: 0;
left: 0;
}
.face4 {
background-color: orange;
transform: rotateX(-90deg);
top: 0;
left: 0;
}
.face5 {
background-color: blue;
transform: rotateY(180deg);
top: 0;
left: 0;
}
.face6 {
background-color: purple;
transform: rotateX(0deg);
top: 50px;
left: 0;
}

在HTML部分，我們使用了一個帶有class為"cube"的div來包含6個class分別為"face1"到"face6"的子div，這6個子div就是色子的六個面。

在CSS部分，我們對于每個面使用了"position: absolute"來讓它們重疊在一起。而用"transform: rotateX/Y"來對各個面進行旋轉，最后得到像一個六面體一樣的效果。

通過CSS3的這些魔法，我們很容易地制作出了一個平面的色子。快試試用CSS3來實現更多有趣的效果吧。