CSS3 3D旋轉是CSS3動畫的一種效果，通過使用transform屬性可以實現。本文將向大家介紹一個CSS3 3D旋轉的例子。

/* HTML代碼 */
<div class="box">
<img src="example.jpg" alt="example">
<p>This is an example.</p>
</div>
/* CSS代碼 */
.box {
width: 300px; 
height: 300px; 
border: 1px solid #ccc;
perspective: 800px; /* 指定透視距離，影響3D效果 */
}
.box img {
width: 100%; 
height: 100%; 
position: absolute;
transform: translateZ(-150px); /* 指定Z軸移動距離 */
}
.box p {
position: absolute;
bottom: 0; 
width: 100%;
text-align: center; 
color: #fff; 
background-color: rgba(0,0,0,0.5);
transform: rotateX(90deg); /* 指定X軸旋轉角度 */
transform-origin: bottom; /* 指定旋轉的原點為底部 */
transition: transform 0.8s ease-in-out; /* 設置過渡效果 */
}
.box:hover p {
transform: rotateX(0); /* 鼠標懸停時執行旋轉，將角度設為0 */
}

該例子實現了一個有透視效果的盒子，內容分為圖片和文字兩部分。當鼠標懸停文本區域時，文本區域將以X軸為旋轉軸線翻轉出來，顯示內容。該動畫效果通過CSS3的transform屬性實現，其中perspective屬性指定了透視距離，影響后面的3D效果。同時，rotateX和translateZ屬性分別控制了X軸旋轉角度和Z軸移動距離，使文本區域可以在一個立體空間內翻轉顯示。

總的來說，CSS3 3D旋轉效果可以賦予網頁元素更加優雅的視覺效果，使得網頁設計更加豐富多彩且具有立體感。通過不斷嘗試和努力，我們將會發現越來越多的有趣的動畫效果能夠通過CSS3樣式實現。