css3動態立體圖過渡效果事例
css3添加了很多很是適用的屬性，此中 3D 屬性就就有著很是棒的頁面結果，那么動態的3D是若何做出來的呢，這里小編就給大師分享一下本身放動態立體圖過渡結果事例；
0節制立體圖動彈
15用在網頁中完當作立體圖
東西/原料
- 電腦
- Sublime text 2
方式/步調
- 1
起首看一下小編的頁面布局，就是一般的構成立體圖的架構，stage 嵌套 container，最后存放六個div，作為立體圖的面；
- 2
然后節制一下 stage（舞臺）的視距和視點和container（容器)的樣式，然后設置為撐持 3D ；
關頭代碼：-webkit-transform-style：preserve-3d；
- 3
總體節制一下六個div的樣式，和在div中的文字樣式；
opacity：0.7；節制透明度
position：absolute；定位
- 4
然后我們別離節制每個面的位置和扭轉角度，然后以此構成立方體；完當作之后的結果圖，如圖二；
- 5
然后我們節制一下容器的角度，算是間接的節制了整個 立體圖的角度，然后我們可以看到，立體圖加倍的真實；（注重 transition 這個屬性）
- 6
之后就是節制實現過渡結果，用 ：hover 選擇器實現鼠標懸停改變樣式，圖二的結果就可以實現，然后共同 transition 這個屬性，添加過渡結果（屬性放在了 容器container選擇器內）
注重事項
- 小我進修事例，僅作分享；
- 注重瀏覽器的兼容性；
- 發表于 2018-04-29 00:00
- 閱讀 ( 860 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章