40歲大叔學習編程之 JavaScript 相冊特效

求是：設置一個展示照片的區(qū)域，下面有上一張，下一張，點擊會切換照片。

實現思路：設置最小下標（minIndex）為 1 ，最大下標（maxIndex）為4，剛開始讓最小下標為1，點擊下一頁，讓下標加1，如果加到最大下標了，讓他等于最小下標1，這樣就能循環(huán)著，展示這4張校花照片了，點擊的時候通過 ApI: setAttribute("src", url) 設置image標簽的 src 屬性，就可以了。簡單吧。

網上找?guī)讖埫琅掌诺絠mages目錄下。快來實現一下吧。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>圖片切換</title>
  </head>
  <body>
    <!-- 4    1    4 -->
    <img src="images/image01.jpg" id="flower" width="200" height="200" />
    <br />
    <button id="prev">上一張</button>
    <button id="next">下一張</button>
    <script type="text/javascript">
      // 1.獲取事件源 需要的標簽
      var flower = document.getElementById("flower")
      var nextBtn = document.getElementById("next")
      var prevBtn = document.getElementById("prev")

      var minIndex = 1,
        maxIndex = 4
      currentIndex = minIndex
      // 2.監(jiān)聽按鈕的點擊
      nextBtn.onclick = function () {
        if (currentIndex === maxIndex) {
          // 到最后一張了
          currentIndex = minIndex
        } else {
          currentIndex++
        }

        flower.setAttribute("src", `images/image0${currentIndex}.jpg`)
      }

      prevBtn.onclick = function () {
        if (currentIndex === minIndex) {
          // 到最后一張了
          currentIndex = maxIndex
        } else {
          currentIndex--
        }
        flower.setAttribute("src", `images/image0${currentIndex}.jpg`)
      }
    </script>
  </body>
</html>

效果如圖：

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

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軸方向改變再位移，否則會發(fā)生如下情況：

自身旋轉

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

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

言

前段時間小編刷抖音的時候，刷到了咱們前端小伙伴制作的3D炫酷相冊，居然那么火，細思一下，隨著3D動畫的普及，廣泛的運作在各個平臺，各官網都在實現3D頁面。它可以更接近于真實的展示我們的產品和介紹，帶來極強的視覺沖擊感。所以說，為了讓自己更加優(yōu)秀，css3 3D動畫必不可少。下面這篇文章，將帶你初步了解CSS3實現酷炫的3D旋轉透視

要想自己的網頁能有3D特效，必須要會透視。

透視 perspective(基礎問題，可以在我的推薦書籍中學習到)

在2D平面產生近大遠小視覺立體，但是只是效果二維的
如果想在網頁產生3D效果需要透視（理解成3D物體投影在2D平面內）。
模擬人類的視覺位置，可認為安排一只眼睛去看
透視我們也稱為視距：視距就是人的眼睛到屏幕的距離
距離視覺點越近的在電腦平面成像越大，越遠成像越小
透視的單位是像素

圖片來源網絡

正文：

CSS3 3D 轉換的常用API介紹

CSS3 3D 應用場景

CSS3 3D 實現一個立方體

1.CSS3 3D 轉換的常用API介紹

首先先上一張css 3D的坐標系：

接下來我們來介紹幾個常用的api：

旋轉

rotateX()
rotateY()
rotateZ() 以上幾個api分別代表繞x，y，z軸旋轉，如下例子為繞x軸旋轉的例子：

相關代碼如下：

<style>
.d3-wrap {
 position: relative;
 width: 300px;
 height: 300px;
 margin: 120px auto;
 /* 規(guī)定如何在 3D 空間中呈現被嵌套的元素 */
 transform-style: preserve-3d;
 transform: rotateX(0) rotateY(45deg);
 transform-origin: 150px 150px 150px;
}

.rotateX {
 width: 200px;
 height: 200px;
 background-color: #06c;
 transition: transform 2s;
 animation: rotateX 6s infinite;
}

@keyframes rotateX {
 0% {
 transform: rotateX(0);
 }
 100% {
 transform: rotateX(360deg);
 } 
}
</style>
<div class="d3-wrap">
 <div class="rotateX"></div>
</div>
復制代碼

位移（Transform）

translateX(x) 定義 3D 轉化，僅使用用于 X 軸的值
translateY(y) 定義 3D 轉化，僅使用用于 Y 軸的值
translateZ(z) 定義 3D 轉化，僅使用用于 Z 軸的值以上幾個api分別代表相對x，y，z軸的位移，如下例子為向z軸位移的例子：

這里我們需要注意的是為了能看出位移的效果，我們需要在父容器上加如下屬性：

.d3-wrap {
 transform-style: preserve-3d;
 perspective: 500;
 /* 設置元素被查看位置的視圖 */
 -webkit-perspective: 500;
}

當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。代碼如下：

.d3-wrap {
 position: relative;
 width: 300px;
 height: 300px;
 margin: 120px auto;
 transform-style: preserve-3d;
 perspective: 500;
 -webkit-perspective: 500;
 transform: rotateX(0) rotateY(45deg);
 transform-origin: center center;
}

.transformZ {
 width: 200px;
 height: 200px;
 background-color: #06c;
 transition: transform 2s;
 animation: transformZ 6s infinite;
}

@keyframes transformZ {
 0% {
 transform: translateZ(100px);
 }
 100% {
 transform: translateZ(0);
 } 
}

3D縮放

scaleX(x) 給定一個 X 軸的3D 縮放轉換值
scaleY(x) 給定一個 Y 軸的3D 縮放轉換值
scaleZ(x) 給定一個 Z 軸的3D 縮放轉換值縮放設置和上面的類似，這里就不做過多介紹了。

理論上說以上三種常見變換已經夠用了，值得關注的是我們要想讓元素呈現出3D效果，以下不可忽視的API也很重要：

2.CSS3 3D 應用場景

css 3D主要應用在網站的交互和模型效果上，比如：

3D輪播圖
3D產品介紹
室內3D仿真
h5 3D活動頁面，比較典型的就是某年淘寶的年終總結H5
3D數據可視化成圖
3D模型圖其實如果css 3D用的熟悉了，一些基本的3D模型完全可以用css畫出來。

3.CSS3 3D 實現一個立方體

核心思路就是用6個面去拼接，通過設置rotate和translate來調整相互之間的位置，如下：

具體代碼如下：

.container {
 position: relative;
 width: 300px;
 height: 300px;
 margin: 120px auto;
 transform-style: preserve-3d;
 /* 為了讓其更有立體效果 */
 transform: rotateX(-30deg) rotateY(45deg);
 transform-origin: 150px 150px 150px;
 animation: rotate 6s infinite;
}
.container .page {
 position: absolute;
 width: 300px;
 height: 300px;
 text-align: center;
 line-height: 300px;
 color: #fff;
 background-size: cover;
}
.container .page:first-child {
 background-image: url(./my.jpeg);
 background-color: rgba(0,0,0,.2);
}
.container .page:nth-child(2) {
 transform: rotateX(90deg);
 transform-origin: 0 0;
 transition: transform 10s;
 background-color: rgba(179, 15, 64, 0.6);
 background-image: url(./my2.jpeg);
}

.container .page:nth-child(3) {
 transform: translateZ(300px);
 background-color: rgba(22, 160, 137, 0.7);
 background-image: url(./my3.jpeg);
}

.container .page:nth-child(4) {
 transform: rotateX(-90deg);
 transform-origin: -300px 300px;
 background-color: rgba(210, 212, 56, 0.2);
 background-image: url(./my4.jpeg);
}
.container .page:nth-child(5) {
 transform: rotateY(-90deg);
 transform-origin: 0 0;
 background-color: rgba(201, 23, 23, 0.6);
 background-image: url(./my5.jpeg);
}
.container .page:nth-child(6) {
 transform: rotateY(-90deg) translateZ(-300px);
 transform-origin: 0 300px;
 background-color: rgba(16, 149, 182, 0.2);
 background-image: url(./my6.jpeg);
}

html結構

<div class="container">
 <div class="page">A</div>
 <div class="page">B</div>
 <div class="page">C</div>
 <div class="page">D</div>
 <div class="page">E</div>
 <div class="page">F</div>
</div>

擴展

我們可以基于上面介紹的，給父元素添加動畫或者拖拽效果，這樣就可以做成更有交互性的3D方塊了，比如置骰子游戲，vr場景，3D相冊等等，具體實現我會抽空依次總結出來，記得關注哦～

作者：徐小夕_Lab實驗室
鏈接：https://juejin.im/post/5dd16b39f265da0bca78958e

喜歡小編的可以點個贊關注小編哦，小編每天都會給大家分享文章。

我自己是一名從事了多年的前端老程序員，小編為大家準備了新出的前端編程學習資料，免費分享給大家！

如果你也想學習前端，那么幫忙轉發(fā)一下然后再關注小編后私信【1】可以得到我整理的這些前端資料了（私信方法：點擊我頭像進我主頁有個上面有個私信按鈕）

在線咨詢

上一篇：如何使用純CSS設計HTML5新LOGO？
下一篇：經典美食佳肴探索味蕾之旅，那些你不可錯過的廣東美食網頁！

您的項目需求

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

整合營銷服務商

40歲大叔學習編程之 JavaScript 相冊特效

言

正文：

您的項目需求