CSS3D旋轉色子是一種需要CSS的3D技術來制作的有趣的特效。您可以通過一些簡單的代碼使用CSS3D旋轉色子將您的網站變得更加生動。

.cube {
height: 150px;
width: 150px;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(45deg) rotateY(45deg);
transform: rotateX(45deg) rotateY(45deg);
}
.cube .side {
box-sizing: border-box;
position: absolute;
height: 150px;
width: 150px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
}
.cube .side1 {
transform: translateZ(75px);
background-color: red;
}
.cube .side2 {
transform: translateX(75px) rotateY(90deg);
background-color: blue;
}
.cube .side3 {
transform: translateY(-75px) rotateX(90deg);
background-color: green;
}
.cube .side4 {
transform: translateZ(-75px) rotateY(180deg);
background-color: yellow;
}
.cube .side5 {
transform: translateX(-75px) rotateY(-90deg);
background-color: purple;
}
.cube .side6 {
transform: translateY(75px) rotateX(-90deg);
background-color: orange;
}

上面的CSS代碼是旋轉色子的關鍵。.cube類設置立方體大小和位置，以及3D變換。.side類設置每個面的大小、位置、范圍和顏色。結果是一個功能性的3D色子效果。

將以上的代碼應用到您的HTML&Style頁面中，你將會看到一個奇妙的3D旋轉色子效果。