整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
上一個(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
知識(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
擊查看照片墻動(dòng)圖特效
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)查，你覺得前端工作難找嗎？
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
