CSS3魔方制作教學

在CSS3中，我們可以使用transform屬性和transition屬性來制作一個3D的魔方。下面是實現的具體步驟：

/* 首先，我們來定義一個容器div，并設置其寬高和位置 */
.container {
width: 500px;
height: 500px;
margin: 0 auto;
position: relative;
}
/* 接著，定義一個單元格div，并設置其高寬、背景顏色、位置和旋轉角度 */
.cube {
width: 100px;
height: 100px;
position: absolute;
background-color: #333;
transform-style: preserve-3d;
transition: all .5s ease;
}
/* 分別設置6個面div的位置、大小、背景顏色和旋轉角度 */
.front {
transform: translateZ(50px);
 }
.back {
transform: translateZ(-50px) rotateY(180deg);
 }
.top {
transform: rotateX(90deg) translateY(-50px) translateZ(50px);
 }
.bottom {
transform: rotateX(-90deg) translateY(50px) translateZ(50px);
 }
.left {
transform: rotateY(-90deg) translateX(-50px) translateZ(50px);
 }
.right {
transform: rotateY(90deg) translateX(50px) translateZ(50px);
}
/* 最后，在HTML中插入單元格div，并分別為其中的6個面div添加類名 */

通過以上步驟，我們就可以制作一個3D的魔方。在鼠標懸停時，可以使用:hover偽類來改變單元格div的旋轉角度，制作出更加真實的特效。