css3控制圖片繞Z軸轉動頁面事例

在網頁中 3D 結果其實就是按照Ｘ　Ｙ　Ｚ這三個軸實現的，但究竟結果頁面是一個平面，仍是需要一些具體的事例來表現出在頁面中圖片繞每個軸動彈環境，此次分享的是圖片讓　Ｚ　軸動彈的事例；

東西/原料

1
最根本的是頁面架構，又有只是簡單的事例，所以架構很是簡單，舞臺（stage），容器（container），一個 img 標簽存放事例圖片；
2
然后我們節制關頭樣式，舞臺 stage ，這是展示 3D 結果的處所，就是和它的名字一樣；關頭的屬性就是 perspective （視距） perspective-origin（視點），其他的巨細邊框都是按照本身需求可以變更；
3
節制容器，巨細透明度之類的都是為了樣式都雅；關頭是 transform-style：preserver-3d；（讓容器變為 3d 容器）；transition:1s linear; （這個是節制過渡結果，讓其可以天然的實現動畫結果）
4
：hover 這個偽類選擇器，就是節制鼠標觸發事務，讓鼠標移上容器，讓容器繞Z軸動彈90度；
5
下面就是繞Z 軸動彈的結果圖，圖二是小編本身代碼（有瑕疵，可是應該可以實現正常的結果）