文章圖片
文章圖片
文章圖片
文章圖片
文章圖片
文章圖片
上節課我們已經學習了3d相關的知識了 ， 今天我們就通過學習的3d知識 ， 做兩個案例 。
1.HTML 3d盒子翻轉案例我們要實現的效果是 ， 當鼠標經過下面的盒子時 ， 盒子進行翻轉到另一面 。
2.3d盒子翻轉案例解題思路：1）首先我們用一個大盒子裝兩個小盒子 ， 這兩個小盒子用來顯示效果 。
2）我們將大盒子的寬度和高度以及外邊距設置好：
3）我們將兩個小盒子設置寬度和高度與大盒子一致 ， 由于我們最終想要實現的效果是兩個圓形 ， 因此需要設置邊框的角度和文字水平、垂直居中對齊：
【AMD|HTML 3d盒子翻轉案例】
4）由于這兩個盒子時疊放在一起的 ， 因此我們利用定位 ， 這樣兩個盒子就疊放到了一起：
5）將兩個小盒子分別設置不同的背景顏色 ， 并為了調整兩個盒子的顯示順序 ， 我們通過z-index來設置：
z-index 屬性設置元素的堆疊順序 。 擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面 。
6）我們希望得到的效果是 ， 當鼠標經過盒子時 ， 前面盒子旋轉到后面盒子位置 ， 后面盒子旋轉到前面盒子位置 ， 因此需要將兩個盒子背對背顯示 ， 這樣在進行旋轉的時候后面盒子的文字才能正常顯示 ， 因此需要將后面的盒子沿著y軸旋轉180度：
7）設置大盒子鼠標經過圖像沿著y軸旋轉180度 ， 這樣才能實現兩個盒子旋轉的效果：
8)由于大盒子設置了旋轉的效果 ， 會將小盒子的旋轉效果覆蓋因此需要將大盒子設置3d呈現效果：
9）為了更加明顯的注意到旋轉的效果 ， 因此將大盒子設置過渡：
10）可能在設置完成后需要閃屏的效果 ， 因此需要將兩個小盒子設置backface-visibility屬性定義當元素不面向屏幕時是否可見 。
相關經驗推薦
- 顯卡|AMDR3-2200G核顯性能怎么樣相當于什么級別的獨立顯卡？
- OPPO|發售一個月多 AMD RX 6500 XT顯卡終于可以原價買了
- 電視盒子|受人喜愛廣告還少的網絡機頂盒，價格便宜適合所有人
- 賽靈思|蘇媽神來之筆！3300多億收購賽靈思 AMD手中現金越來越多
- 機器人|十年，AMD“三劍合一”再出擊
- 教會|HTML3D轉換怎么使用？一分鐘教會你！
- 微軟|AMD銳龍7000處理器將搭載核顯：夠亮個機
- 英特爾|市值1977億美元！“千年老二”AMD終于反超英特爾！背后原因有3個？
- 小米科技|拼多多幾十塊的電視盒子能買嗎，為什么這么便宜？
- AMD|性能暴漲40% AMD的3D緩存版Zen3銳龍堅持8核：游戲夠用