CSS 圖片正反 3D 旋轉現在在網頁設計中越來越常見了，它可以讓網頁上的圖片看起來更加的生動，強化用戶體驗。下面我們就來學習一下如何使用 CSS 實現圖片的正反 3D 旋轉效果。

/* 首先，我們需要為圖片添加一個父級 div，并設置其相對定位 */
.parent {
position: relative;
}
/* 接著，在父級 div 上設置透視視角，此例中設置為 1000px */
.parent {
perspective: 1000px;
}
/* 接下來，我們將圖片分別作為正面和背面，使用絕對定位并調整它們的位置、大小 */
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
}
/* 我們需要對背面圖片進行 3D 反轉，并通過修改 transform 的 rotateY 使其不可見 */
.back {
transform: rotateY(180deg);
}
/* 最后，我們對兩張圖片同時設置過渡效果，其中正面圖片的 transform 為 rotateY(180deg)，背面圖片的 transform 為 rotateY(0deg) */
.parent:hover .front {
transform: rotateY(180deg);
}
.parent:hover .back {
transform: rotateY(0deg);
z-index: -1;
}
/* 如果需要在圖片上添加文本內容，可以將文本寫在每張圖片的內部，同時利用 display: flex; align-items: center; justify-content: center; 使其居中 */
.front span,
.back span {
display: flex;
align-items: center;
justify-content: center;
}

使用以上代碼即可完成圖片正反 3D 旋轉效果。通過這種方式，我們可以更有效地吸引用戶的注意力，并增強用戶對網站內容的體驗感。同時，我們可以根據需要自行調整圖片大小、傾斜度等參數，以創建出更加獨特的 3D 效果。