整合營銷服務(wù)商

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

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

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

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

          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主體中放了一個div,里面包著你想要顯示在照片墻上的照片,數(shù)量可以任意。

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

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

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

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

          給每個圖片單獨(dú)設(shè)置樣式,使每張圖片繞自身Y軸旋轉(zhuǎn)一定角度,角度取決于你放了多少張圖片,有n張圖,則每張圖片依次旋轉(zhuǎn)360/n度,比如這里我放了8張圖,那么每張圖應(yīng)依次比上一張圖片多旋轉(zhuǎn)360/8=45度,層層遞進(jìn),如0度、45度、90度、135度、180度、225度、270度、315度,再使每張圖片向自身的Z軸(此時每張圖片的Z軸方向都已改變)都設(shè)置一個正向(全為負(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),再向各個方向擴(kuò)散。一定要先旋轉(zhuǎn),使自身Z軸方向改變再位移,否則會發(fā)生如下情況:

          自身旋轉(zhuǎn)

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

          最后一步:給包著所有圖片的div設(shè)置繞著初始位置旋轉(zhuǎn)的動畫效果即rotateY(360deg),這里要注意是給div設(shè)置動畫,而不是給圖片,否則會變成“自轉(zhuǎn)”,我們需要的效果是“公轉(zhuǎn)”,設(shè)置margin使其在瀏覽器中間顯示,方便觀察,設(shè)置3d視角,接著給動畫設(shè)置過渡時間6s(旋轉(zhuǎn)快慢,可更改),再設(shè)置infinite使其無限循環(huán),為了方便觀察我使整個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的力量,希望對你有幫助,或者就當(dāng)自己做個筆記。

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

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

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

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

          源碼:

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

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

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

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

          擊查看照片墻動圖特效

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


          javascript課題:高級原生javascript拖拽照片墻

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

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

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

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

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

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

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

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

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


          以下附上HTML/JAVASCRIPT源碼:

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

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

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


          主站蜘蛛池模板: 综合无码一区二区三区四区五区| 人妻少妇精品视频一区二区三区| 亚洲av无码成人影院一区| 精品免费国产一区二区三区| 国产一区二区三区四| 91在线一区二区| eeuss鲁片一区二区三区| 成人精品一区二区电影| 国产精品亚洲综合一区在线观看| 国精品无码一区二区三区左线| 精品视频一区二区三区在线观看| 日韩人妻无码一区二区三区99| 在线欧美精品一区二区三区 | 国产精品视频一区二区三区四| 久久久精品日本一区二区三区| 亚洲综合激情五月色一区| 国精产品一区一区三区| 国产精品一区不卡| 亚洲午夜一区二区三区| 一区二区视频传媒有限公司| 国产一区二区三区美女| 日韩最新视频一区二区三| 国产成人无码一区二区在线播放| 日本免费一区尤物| 亚洲精品国产suv一区88| 一区二区三区观看免费中文视频在线播放 | 亚洲乱码日产一区三区| 亚洲高清毛片一区二区| 无码人妻久久一区二区三区免费 | 亚洲综合一区二区国产精品| 香蕉视频一区二区| 一区二区国产精品| 在线观看日本亚洲一区| 中文字幕一区在线播放| 免费萌白酱国产一区二区三区| 亚洲丰满熟女一区二区v| 人妻AV中文字幕一区二区三区| 国产精品va无码一区二区| 久久中文字幕一区二区| 国产精品一区二区久久不卡| 国产免费一区二区三区不卡|