展示頁(yè)效果

學(xué)習(xí)妙味課堂的展示頁(yè)效果

效果預(yù)覽：展示頁(yè)

知識(shí)點(diǎn)預(yù)備：

【1】transform-style屬性

transform-style屬性指定了它的子元素看起來是存在3D空間中，還是存在2D空間中，如果存在2D空間中，則它的子元素不能存在3D中。

注意：因?yàn)樵搶傩圆粫?huì)被（自動(dòng)）繼承，所以必須為元素所有非葉后代節(jié)點(diǎn)設(shè)置該屬性。

語(yǔ)法：transform-style: flat | preserve-3d

preserve-3d指定子元素定位在三維空間內(nèi)

flat指定子元素位于此元素所在平面內(nèi)。

【2】perspective屬性

MDN官方文檔說明：

perspective 屬性指定了觀察者與z=0平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果。z>0的三維元素比正常大，而z<0時(shí)則比正常小，大小程度由該屬性的值決定。

舉栗子：

<style>  2  #wrap{  3  4  position: relative
        		
延伸閱讀
        		

        			
        			
ssh框架
        			2016-09-30
        			
        			
        			
        			
阿里移動(dòng)安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖
        			2017-07-26
        			
        			
        			
        			
消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe
        			2024-03-26
        			
        			
        			
        			
Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】
        			2017-07-26
        			
        			
        			
        			
詞向量-LRWE模型-更好地識(shí)別反義詞同義詞
        			2017-07-26
        			
        			
        			
        			
從棧不平衡問題 理解 calling convention
        			2017-07-26
        			
        			
        			
        			
php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明
        			2017-07-26
        			
        			
        			
        			
Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解
        			2017-07-26
        			
        			
        			
        			
阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析
        			2017-07-26
        			
        			
        			
        			
集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二)
        			2017-07-26
        			
        			
        			
        		
        		
        		學(xué)習(xí)是年輕人改變自己的最好方式