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

上一個效果圖，覺得有用在往下看，避免浪費大家時間。

CSS實現3D效果

廢話少說，直接看如何實現（利用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>

以上代碼是準備工作，在html代碼的body主體中放了一個div，里面包著你想要顯示在照片墻上的照片，數量可以任意。

接下來上CSS代碼，記得你的設備要支持CSS3才可以。

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

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

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

給每個圖片單獨設置樣式，使每張圖片繞自身Y軸旋轉一定角度，角度取決于你放了多少張圖片，有n張圖，則每張圖片依次旋轉360/n度，比如這里我放了8張圖，那么每張圖應依次比上一張圖片多旋轉360/8=45度，層層遞進，如0度、45度、90度、135度、180度、225度、270度、315度，再使每張圖片向自身的Z軸（此時每張圖片的Z軸方向都已改變）都設置一個正向(全為負值也可)的等距離的位移，使其擴散開，我這里的寫法效果也一樣，旋轉45度位移 - 500px其實和旋轉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);}

俯視效果

先自身旋轉，再向各個方向擴散。一定要先旋轉，使自身Z軸方向改變再位移，否則會發生如下情況：

自身旋轉

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

最后一步：給包著所有圖片的div設置繞著初始位置旋轉的動畫效果即rotateY（360deg），這里要注意是給div設置動畫，而不是給圖片，否則會變成“自轉”，我們需要的效果是“公轉”，設置margin使其在瀏覽器中間顯示，方便觀察，設置3d視角，接著給動畫設置過渡時間6s（旋轉快慢，可更改），再設置infinite使其無限循環，為了方便觀察我使整個div繞其x軸旋轉-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);}
  }

到此為止吧，網絡有著1+1>2的力量，希望對你有幫助，或者就當自己做個筆記。

碼/視頻評論后加前端學習群470593776

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

知識點：浮動定位布局切換技巧，js鼠標事件，拖拽功能

碰撞檢測，原生js運動框架，2017年就業形勢分析，面試技巧等

源碼：

源碼/視頻評論后加前端學習群470593776

代碼過長，只發部分，大家評論下本文章后

可以加下前端群【470593776】（源碼和視頻）

擊查看照片墻動圖特效

如何提高javascript邏輯思維？如何開發特效？

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

知識點：HTML/CSS布局，兼容性處理

原生javascript DOM操作，鼠標拖拽功能，

碰撞檢測，勾股定理計算最小距離，原生javascript運動框架封裝，

面向過程函數式封裝思維。2017就業形勢分析等

PS：這個特效對于布局的要求并不高，大部分學習web前端的朋友都可以做出來，但是對

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

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

東西，而不是能用jquery湊數的。

前端學習群47059+3776，歡迎初學和進階中的伙伴，每日分享干貨！

以下附上HTML/JAVASCRIPT源碼：

點擊查看源碼動圖

頭條號里有許多web前端學習視頻，企業常用特效/案例/項目，敬請關注！

文末調查，你覺得前端工作難找嗎？

在線咨詢

上一篇：并發抓取網頁H1標題大揭秘！C#打造高效信息提取工具！
下一篇：HTML表單標簽詳解：如何用HTML標簽打造互動網頁？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商