CSS3中的3D旋轉功能，讓網頁設計可以更加生動，為用戶帶來更好的視覺體驗。這里介紹一個3D旋轉海報的實現方法，讓我們一起來看看吧。

/* 容器 */
.post{
width: 350px; 
height: 500px; 
margin: 50px auto 0; 
perspective: 800px; 
}
/* 海報 */
.poster{ 
width: 100%; 
height: 100%; 
position: absolute; 
transform-style: preserve-3d; 
transform-origin: center center; 
box-shadow: 0 0 20px 5px rgba(0,0,0,0.3); 
transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}
/* 海報正面 */
.poster >div:first-of-type{ 
background-image: url(海報正面圖片地址); 
background-size: cover; 
width: 350px; 
height: 500px; 
position: absolute; 
transform-origin: center center; 
transform: rotateY(0deg); 
}
/* 海報背面 */
.poster >div:last-of-type{ 
background-image: url(海報背面圖片地址); 
background-size: cover; 
width: 350px; 
height: 500px; 
position: absolute; 
transform-origin: center center; 
transform: rotateY(180deg); 
}
/* 鼠標懸浮時旋轉 */
.poster:hover >div:first-of-type{ 
transform: rotateY(180deg); 
}
.poster:hover >div:last-of-type{ 
transform: rotateY(360deg); 
}

首先，我們需要一個容器，設置透視(perspective)屬性以讓元素在三維空間中呈現。接下來，我們創建海報元素，并用transform-style屬性定義其為3D變換元素，以便容器在呈現它時，也以3D方式呈現。同時，為了美觀，在海報上添加一個陰影效果(box-shadow)。

海報元素中還包含兩個子元素，分別為正面和背面。 設置寬高及背景圖片，通過transform-origin屬性，讓其以中心點為基準進行旋轉變形。 正面默認為0度旋轉，背面180度旋轉，這樣旋轉時就可以實現翻轉效果。

最后，我們為海報元素添加鼠標懸浮效果，當鼠標懸浮在海報上時，正面元素旋轉到180度，背面元素就為360度，因為前面已經設置了背面180度，這里是360度會連續旋轉翻轉到正面，也就實現了翻轉效果。

這樣，我們就利用CSS3中的3D旋轉功能，實現了一個酷炫的3D旋轉海報。實際上，CSS3還有很多3D效果可以用來豐富我們的網頁設計，希望大家可以多多探索。