圖片繞Y軸3D轉動90度頁面事例

今天繼續分享 css3 的3D屬性可以做到的頁面結果，此次是圖片繞 Y 軸動彈，這是一個比力根本的結果，實現也比力輕易；

東西/原料

1
關于在進修 html 時教員就很是強調架構的主要性這里也是同樣的，可是固然這么說，可是這么簡單的頁面事例，架構必然不會復雜的；小編做的事例只是用‘舞臺’（stage）div 包含著 ‘容器’（container），容器存放著我們分辨結果的圖片；
2
起頭設置 css 的樣式，在構建 3D 結果的時辰舞臺的屬性設置是必不成少的，width 和height 這些并不是關頭屬性，關頭是視距 ‘perspective’和視點 ‘perspective-origin’
3
容器的關頭屬性則是 ‘transform-style’這個界說 3D 的屬性；關于 ‘transition：1s liner’則是節制過渡的結果，實現光滑的動畫結果，而不是一會兒圖片動彈 90 度；（img 這個樣式節制則是為了讓圖片 div巨細一致；）
4
然后經由過程：hover 這個偽類選擇器，實現鼠標懸停節制圖片動彈；（這個屬性的意思年夜致是 ‘鼠標懸停到舞臺 div 時，容器動彈 90 度’）
5
完當作以上的設置之后，就可以實現下圖的3D結果，代碼量并不年夜，只是關于 3D 的屬性節制需要必然的理解，和其他部門的根本常識；