利用css制作3D照片墻效果

發(fā)布時(shí)間：2019-10-29 13:50:47 作者：佚名

這篇文章主要介紹了利用css制作3D照片墻效果,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

利用css制作3D照片墻，具體代碼如下所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</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ù)量可以任意。接著開始著手寫樣式。

body{perspective: 5800px;}

以上代碼是為照片墻設(shè)置一個(gè)足夠大的3D視距，至少能容下所有圖片的運(yùn)動軌跡。

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

以上代碼是給每個(gè)圖片設(shè)置樣式，給圖片一個(gè)絕對定位，使其可以被任意地控制位置，此時(shí)圖片會重疊在一起，寬高取決于照片墻中的的圖片的具體尺寸，當(dāng)然你也可以設(shè)置大小，320*480是我舉的一個(gè)例子。

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);}

以上代碼是給每個(gè)圖片單獨(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軸（此時(shí)每張圖片的Z軸方向都已改變）都設(shè)置一個(gè)正向(全為負(fù)值也可)的等距離的位移，使其擴(kuò)散開，我這里的寫法效果也一樣，旋轉(zhuǎn)45度位移 - 500px其實(shí)和旋轉(zhuǎn)225度位移500px效果是一樣的。

俯視圖：先自身旋轉(zhuǎn)，再向各個(gè)方向擴(kuò)散。

一定要先旋轉(zhuǎn)，使自身Z軸方向改變再位移，否則會發(fā)生如下情況：

在這里插入圖片描述

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

接著

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);}
  }

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

效果圖

在這里插入圖片描述