整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          CSS怎么制作立體的3D照片墻效果

          上一個(gè)效果圖,覺得有用在往下看,避免浪費(fèi)大家時(shí)間。

          CSS實(shí)現(xiàn)3D效果

          廢話少說,直接看如何實(shí)現(xiàn)(利用css制作3D照片墻,具體代碼如下所示:):

          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>3D照片墻</title>
          </head>
          <body>
           <div>
            <img src="#"/>
            <img src="#"/>
            <img src="#"/>
            <img src="#"/>
            <img src="#"/>
            <img src="#"/>
            <img src="#"/>
            <img src="#"/>
           </div>
          </body>
          </html>

          以上代碼是準(zhǔn)備工作,在html代碼的body主體中放了一個(gè)div,里面包著你想要顯示在照片墻上的照片,數(shù)量可以任意。

          接下來上CSS代碼,記得你的設(shè)備要支持CSS3才可以。

          /*為照片墻設(shè)置一個(gè)足夠大的3D視距,至少能容下所有圖片的運(yùn)動(dòng)軌跡。*/
          body{perspective: 5800px;}

          給每個(gè)圖片設(shè)置樣式,給圖片一個(gè)絕對(duì)定位,使其可以被任意地控制位置,此時(shí)圖片會(huì)重疊在一起,寬高取決于照片墻中的的圖片的具體尺寸,當(dāng)然你也可以設(shè)置大小

          img{height:480px;width:320px;}

          給每個(gè)圖片單獨(dú)設(shè)置樣式,使每張圖片繞自身Y軸旋轉(zhuǎn)一定角度,角度取決于你放了多少?gòu)垐D片,有n張圖,則每張圖片依次旋轉(zhuǎn)360/n度,比如這里我放了8張圖,那么每張圖應(yīng)依次比上一張圖片多旋轉(zhuǎn)360/8=45度,層層遞進(jìn),如0度、45度、90度、135度、180度、225度、270度、315度,再使每張圖片向自身的Z軸(此時(shí)每張圖片的Z軸方向都已改變)都設(shè)置一個(gè)正向(全為負(fù)值也可)的等距離的位移,使其擴(kuò)散開,我這里的寫法效果也一樣,旋轉(zhuǎn)45度位移 - 500px其實(shí)和旋轉(zhuǎn)225度位移500px效果是一樣的。

          img:nth-child(1){transform: translateZ(500px);}
           img:nth-child(2){transform: translateZ(-500px);}
           img:nth-child(3){transform:rotateY(45deg) translateZ(-500px);}
           img:nth-child(4){transform:rotateY(45deg)  translateZ(500px);}
           img:nth-child(5){transform:rotateY(-45deg) translateZ(500px);}
           img:nth-child(6){transform:rotateY(-45deg) translateZ(-500px);}
           img:nth-child(7){transform:rotateY(90deg) translateZ(500px);}
           img:nth-child(8){transform:rotateY(90deg) translateZ(-500px);}

          俯視效果

          先自身旋轉(zhuǎn),再向各個(gè)方向擴(kuò)散。一定要先旋轉(zhuǎn),使自身Z軸方向改變?cè)傥灰疲駝t會(huì)發(fā)生如下情況:

          自身旋轉(zhuǎn)

          先位移后再旋轉(zhuǎn),由于先位移時(shí)所有圖片的z軸都為初始方向,會(huì)使得所有圖片同向位移一段距離,仍然疊在一起,再旋轉(zhuǎn)時(shí)也會(huì)擠在一起。

          最后一步:給包著所有圖片的div設(shè)置繞著初始位置旋轉(zhuǎn)的動(dòng)畫效果即rotateY(360deg),這里要注意是給div設(shè)置動(dòng)畫,而不是給圖片,否則會(huì)變成“自轉(zhuǎn)”,我們需要的效果是“公轉(zhuǎn)”,設(shè)置margin使其在瀏覽器中間顯示,方便觀察,設(shè)置3d視角,接著給動(dòng)畫設(shè)置過渡時(shí)間6s(旋轉(zhuǎn)快慢,可更改),再設(shè)置infinite使其無限循環(huán),為了方便觀察我使整個(gè)div繞其x軸旋轉(zhuǎn)-15度。

          div{margin:0 auto;margin-top:600px;
          transform-style: preserve-3d;
          animation:zhuan 6s linear  infinite;height:480px;width:320px;}
          @keyframes zhuan{
             0%{transform:rotateX(-15deg) rotateY(0);}
             100%{transform: rotateX(-15deg) rotateY(360deg);}
            }

          到此為止吧,網(wǎng)絡(luò)有著1+1>2的力量,希望對(duì)你有幫助,或者就當(dāng)自己做個(gè)筆記。

          碼/視頻評(píng)論后加前端學(xué)習(xí)群470593776

          javascript課題:原生js拖拽照片墻

          知識(shí)點(diǎn):浮動(dòng)定位布局切換技巧,js鼠標(biāo)事件,拖拽功能

          碰撞檢測(cè),原生js運(yùn)動(dòng)框架,2017年就業(yè)形勢(shì)分析,面試技巧等

          源碼:

          源碼/視頻評(píng)論后加前端學(xué)習(xí)群470593776

          源碼/視頻評(píng)論后加前端學(xué)習(xí)群470593776

          代碼過長(zhǎng),只發(fā)部分,大家評(píng)論下本文章后

          可以加下前端群【470593776】(源碼和視頻)

          擊查看照片墻動(dòng)圖特效

          如何提高javascript邏輯思維?如何開發(fā)特效?


          javascript課題:高級(jí)原生javascript拖拽照片墻

          知識(shí)點(diǎn):HTML/CSS布局,兼容性處理

          原生javascript DOM操作,鼠標(biāo)拖拽功能,

          碰撞檢測(cè),勾股定理計(jì)算最小距離,原生javascript運(yùn)動(dòng)框架封裝,

          面向過程函數(shù)式封裝思維。2017就業(yè)形勢(shì)分析等

          PS:這個(gè)特效對(duì)于布局的要求并不高,大部分學(xué)習(xí)web前端的朋友都可以做出來,但是對(duì)

          javascript的要求不低,特別是對(duì)于邏輯思維,以及一些兼容性的處理,還有js的碰撞檢測(cè),

          算法,在這個(gè)案例里我們用的都是原生 javascript代碼,原生JS一定是我們面試中必須要學(xué)的

          東西,而不是能用jquery湊數(shù)的。

          前端學(xué)習(xí)群47059+3776,歡迎初學(xué)和進(jìn)階中的伙伴,每日分享干貨!


          以下附上HTML/JAVASCRIPT源碼:

          點(diǎn)擊查看源碼動(dòng)圖

          頭條號(hào)里有許多web前端學(xué)習(xí)視頻,企業(yè)常用特效/案例/項(xiàng)目,敬請(qǐng)關(guān)注!

          文末調(diào)查,你覺得前端工作難找嗎?


          主站蜘蛛池模板: 亚洲AV色香蕉一区二区| 麻豆aⅴ精品无码一区二区| 亚洲一区二区三区无码国产| 一区二区三区在线视频播放| 国产精品香蕉在线一区| 一区二区三区四区精品视频| 日韩精品一区二区三区中文字幕| 麻豆果冻传媒2021精品传媒一区下载 | 中文字幕在线观看一区二区三区| 国产麻豆剧果冻传媒一区| 伦精品一区二区三区视频| 精品一区二区视频在线观看| 久久久久人妻精品一区二区三区| 久久91精品国产一区二区| 国产精品va无码一区二区 | 精品久久综合一区二区| 精品亚洲福利一区二区| 精品一区二区久久久久久久网精| 成人精品一区二区三区校园激情| 无码丰满熟妇一区二区| 精品国产一区二区三区在线| 日韩精品一区在线| 国产成人精品久久一区二区三区av| 日韩一区二区三区在线观看| 亚洲国产综合无码一区二区二三区| 一区二区三区四区电影视频在线观看 | 久久国产免费一区二区三区| 日本在线一区二区| 色久综合网精品一区二区| 麻豆国产一区二区在线观看| 亚洲av乱码一区二区三区按摩| 国模吧一区二区三区精品视频| 日本美女一区二区三区| 成人日韩熟女高清视频一区| 久久99精品一区二区三区| 久久人妻无码一区二区| 视频一区视频二区制服丝袜| 成人精品视频一区二区三区不卡 | 亚洲一区二区三区四区视频| 亚洲日韩国产一区二区三区在线| 精品国产一区二区三区免费看|