欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

使用css怎么制作一個3D照片墻效果

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)使用css怎么制作一個3D照片墻效果，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比豐寧網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式豐寧網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋豐寧地區(qū)。費用合理售后完善，十年實體公司更值得信賴。

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</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，里面包著你想要顯示在照片墻上的照片，數(shù)量可以任意。接著開始著手寫樣式。

 body{perspective: 5800px;}

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

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

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

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

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

使用css怎么制作一個3D照片墻效果

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

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

使用css怎么制作一個3D照片墻效果

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

接著

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

css的三種引入方式

1.行內(nèi)樣式，最直接最簡單的一種，直接對HTML標簽使用style=""。2.內(nèi)嵌樣式，就是將CSS代碼寫在之間，并且用

進行聲明。3.外部樣式，其中鏈接樣式是使用頻率最高，最實用的樣式，只需要在之間加上

就可以了。其次就是導(dǎo)入樣式，導(dǎo)入樣式和鏈接樣式比較相似，采用@import樣式導(dǎo)入CSS樣式表，不建議使用。

上述就是小編為大家分享的使用css怎么制作一個3D照片墻效果了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱欄目：使用css怎么制作一個3D照片墻效果
文章路徑：http://chinadenli.net/article14/gigode.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司、企業(yè)建站、做網(wǎng)站、微信公眾號、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)