CSS 3D骰子是一種非常有趣的效果，通過CSS3的3D變換效果，可以讓一個普通的2D方塊變成一個三維的骰子。

首先需要用HTML創建一個div，設置寬度和高度。然后在CSS中使用transform屬性來實現3D效果。具體代碼如下：

<div class="cube">
<div class="side side1"></div>
<div class="side side2"></div>
<div class="side side3"></div>
<div class="side side4"></div>
<div class="side side5"></div>
<div class="side side6"></div>
</div>
.cube {
width: 200px;
height: 200px;
transform-style: preserve-3d;
position: relative;
transform: translateZ(-100px);
}
.side {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid #000;
}
.side1 {
background-color: #ff0000;
transform: rotateY(0deg) translateZ(100px);
}
.side2 {
background-color: #ffffff;
transform: rotateX(-90deg) translateZ(100px);
}
.side3 {
background-color: #00ff00;
transform: rotateY(90deg) translateZ(100px);
}
.side4 {
background-color: #0000ff;
transform: rotateY(-90deg) translateZ(100px);
}
.side5 {
background-color: #ffff00;
transform: rotateX(90deg) translateZ(100px);
}
.side6 {
background-color: #ff00ff;
transform: rotateX(180deg) translateZ(100px);
}

在這個代碼中，我們使用了transform-style屬性來保持子元素在一個3D形式（preserve-3d）。然后，我們將整個div元素向z軸平移，使其看起來像一個骰子。

最后，我們設置了每個面的背景色，并使用transform：rotateY（）和translateZ（）來將每個面放置在正確的位置。這里用到的是旋轉和平移效果。

通過這個例子，你可以學到如何使用CSS 3D效果創建一個非常有趣的骰子，以及如何調整每個面的位置和顏色。這將幫助你開發創新的web設計和動畫。