CSS3旋轉魔方是基于CSS3實現的一個3D動畫效果，它能夠通過CSS3中的transform屬性實現元素的旋轉效果。這個3D魔方的搭建非常簡單，只需要用到HTML和CSS代碼即可，下面我們就來詳細了解一下。

<div id="cube">
<div class="face top"></div>
<div class="face front"></div>
<div class="face right"></div>
<div class="face back"></div>
<div class="face left"></div>
<div class="face bottom"></div>
</div>
#cube {
position: relative;
width: 200px;
height: 200px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.face {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
.top {
top: 0;
background-color: #ff0000;
-webkit-transform: rotateX(90deg) translateZ(100px);
-moz-transform: rotateX(90deg) translateZ(100px);
transform: rotateX(90deg) translateZ(100px);
}
.front {
transform: translateZ(100px);
background-color: #ffffff;
}
.right {
right: 0;
background-color: #009900;
-webkit-transform: rotateY(90deg) translateZ(100px);
-moz-transform: rotateY(90deg) translateZ(100px);
transform: rotateY(90deg) translateZ(100px);
}
.back {
transform: rotateY(180deg) translateZ(100px);
background-color: #0000ff;
}
.left {
left: 0;
background-color: #f0f000;
-webkit-transform: rotateY(-90deg) translateZ(100px);
-moz-transform: rotateY(-90deg) translateZ(100px);
transform: rotateY(-90deg) translateZ(100px);
}
.bottom {
bottom: 0;
background-color: #00ffff;
-webkit-transform: rotateX(-90deg) translateZ(100px);
-moz-transform: rotateX(-90deg) translateZ(100px);
transform: rotateX(-90deg) translateZ(100px);
}

上面是這個3D魔方的HTML和CSS代碼，其中id為"cube"的div為整個魔方的容器，包含了6個class為"face"的子元素，每個子元素代表一個魔方的面。

在CSS代碼中，我們給每個面設置了固定的寬高，并用相應的顏色以及邊框樣式進行了美化。同時，我們還為整個魔方的容器設置了transform-style屬性，用于保存元素的3D變換，從而讓魔方能夠呈現3D效果。

通過在每個面的樣式中使用transform屬性，我們實現了不同方向的旋轉效果。比如，我們通過rotateX(90deg) translateZ(100px)來實現了魔方的上面旋轉90度。

總之，CSS3旋轉魔方是一個非常酷炫的3D動畫效果，它的實現非常簡單，只需要用到HTML和CSS代碼即可。大家如果感興趣，可以自己嘗試一下哦~