兔子圖片繞X軸3D轉動90度事例

繞X軸動彈，正常來說是需要3D結果才可以實現的，那么我們在網頁平面上怎么實現這個結果呢？

東西/原料

1
起首介紹一下小編的頁面架構，div——stage（舞臺），div——container（容器），和一個 img （就是兔子圖片）
2
先設置一下舞臺的樣式，寬度 500px ；高度 324px；設置一個紅色的邊框，作為后面圖片動彈時的對比；（其它的圖片中有注釋）
3
容器（container）div，是節制圖片的關頭，圖片在容器中，容器變更，圖片天然也跟著變更；然后設置過渡結果（transition）實現動態的過程；設置完當作今后初步結果如圖二，只不外無法動彈；
4
想要實現動彈，還要設置一下：hover 這個選擇器，給容器添加一個轉變，即一個扭轉的轉變，用transform 屬性節制；代碼如圖
5
下圖是小編本身頁面的整個代碼圖，供大師參考；（有些不關頭的屬性可以自由設置的，好比圖片，寬度，高度等等）