CSS書本3D旋轉是一種非常流行的網頁設計技巧，通過對元素的旋轉和變形來實現頁面動態效果，給用戶帶來更加豐富的視覺體驗。

/* CSS代碼 */
/* 盒子設置 */
.box {
width: 200px;
height: 200px;
background-color: #ff5151;
/* 將盒子轉換為3D立方體 */
transform-style: preserve-3d;
/* 設置過渡效果 */
transition: transform 1s;
}
/* 內部頁面樣式 */
.box .page {
width: 200px;
height: 200px;
background-color: #ccc;
position: absolute;
/* 防止盒子重疊 */
transform-origin: center center;
/* 設置內部頁面對立方體的相對位置 */
transform: translateZ(100px);
}
/* 鼠標懸停時的樣式 */
.box:hover {
/* 繞Y軸旋轉180度 */
transform: rotateY(180deg);
}

在上面的代碼中，我們首先創建了一個名為.box的盒子元素，并設置它的寬高和背景顏色。接著，我們使用CSS3的transform-style屬性將盒子轉換為3D立方體，并使用transition屬性為其添加過渡效果。

在盒子內部，我們創建了一個名為.page的元素，并設置它的寬高和背景顏色。這個元素的position屬性設置為absolute，將其相對于盒子進行定位。我們還使用transform-origin屬性為盒子內部頁面設置相對于立方體的位置，并使用translateZ屬性將其放置在立方體的前面。

最后，我們使用:hover偽類為盒子設置鼠標懸停時的樣式。我們將其繞Y軸旋轉180度，實現了盒子的翻轉效果。

這種簡單的CSS3技巧，通過實現立體效果，讓我們的網頁設計更加生動，給用戶帶來了更好的視覺體驗。