今天用了學習並且使用到了圖片的3d翻轉效果，下面簡要整理一下實現的步驟：

1、先準備好HTML的三層巢狀，最內層要有兩個塊作為翻轉的正反兩面；

2、給最外層元素使用perspective屬性定義，使得其子元素獲得透視的效果；

3、利用hover屬性使滑鼠懸停在最外層元素時選中中間層作為選擇器，讓其利用transform:rotateX()或transform:rotateY()旋轉180度；

4、改最外層和內層的兩個元素設定相同的寬高；

5、利用transition屬性指定中間層實現翻轉的時間和使用transform-style:perspective-3d屬性指定中間層的呈現方式為3d呈現並給中間層設定相對定位，還有要使用transform-origin屬性指定旋轉軸；

6、給內層的兩個元素使用backface-visibility：hidden設定背面不可見以及設定成絕對定位的top和left為0；

7、用z-index：2指定初始要顯示的那面內層元素；

8、讓初始作為背面的內層元素使用transform：rotateX/Y（180deg）實現翻轉。

由於時間原因，這裡只寫出描述內容，具體例子稍後給出。。。感謝您的閱讀，期待您留下寶貴意見和建議。