CSS3有很多強大的特性，其中一個就是正方體翻轉。通過CSS3的3D轉換，我們可以輕松地將一個2D的平面變成一個3D的立體。本文將介紹如何使用CSS3創建一個簡單的正方體翻轉效果。

/* 定義容器的樣式 */
.container {
perspective: 1000px; /* 定義3D空間的透視點 */
}
/* 定義正方體的樣式 */
.cube {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d; /* 定義該元素以3D方式變換 */
}
/* 定義正方體所有的面 */
.cube .face {
position: absolute;
width: 100px;
height: 100px;
backface-visibility: hidden; /* 隱藏背面 */
}
/* 定義正方體的前面 */
.cube .face-front {
transform: translateZ(50px); /* 將前面向屏幕外移動 */
background: red;
}
/* 定義正方體的后面 */
.cube .face-back {
transform: rotateY(180deg) translateZ(50px); /* 將后面向屏幕外移動并旋轉180度 */
background: blue;
}
/* 定義正方體的左面 */
.cube .face-left {
transform: rotateY(-90deg) translateZ(50px); /* 將左面向屏幕外旋轉90度并移動 */
background: green;
}
/* 定義正方體的右面 */
.cube .face-right {
transform: rotateY(90deg) translateZ(50px); /* 將右面向屏幕外旋轉90度并移動 */
background: yellow;
}
/* 定義正方體的上面 */
.cube .face-top {
transform: rotateX(90deg) translateZ(50px); /* 將上面向屏幕外旋轉90度并移動 */
background: purple;
}
/* 定義正方體的下面 */
.cube .face-bottom {
transform: rotateX(-90deg) translateZ(50px); /* 將下面向屏幕外旋轉90度并移動 */
background: pink;
}
/* 定義翻轉動畫 */
.cube .face {
transition: transform 1s;
}
/* 鼠標懸停時翻轉正方體 */
.cube:hover .face {
transform: rotateY(180deg);
}

在以上代碼中，我們定義了一個名為.container的容器，該容器用于放置正方體。container元素的perspective屬性用于定義3D空間的透視點。接下來，我們定義.cube類，該類用于定義正方體的樣式，包括transform-style屬性，用于定義該元素以3D方式變換。該元素包含6個面，分別為前、后、左、右、上、下，每個面的樣式定義不同。最后，我們定義了一個翻轉動畫，用于在鼠標懸停時翻轉正方體。

通過以上代碼，我們可以輕松地創建一個簡單的正方體翻轉效果。通過進一步學習，我們可以發掘更多的3D特效，打造更加驚艷的網頁效果。