40岁大叔学习编程之 JavaScript 相册特效

求是：设置一个展示照片的区域，下面有上一张，下一张，点击会切换照片。

实现思路：设置最小下标（minIndex）为 1 ，最大下标（maxIndex）为4，刚开始让最小下标为1，点击下一页，让下标加1，如果加到最大下标了，让他等于最小下标1，这样就能循环着，展示这4张校花照片了，点击的时候通过 ApI: setAttribute("src", url) 设置image标签的 src 属性，就可以了。简单吧。

网上找几张美女照片，放到images目录下。快来实现一下吧。

<!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.监听按钮的点击
      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轴方向改变再位移，否则会发生如下情况：

自身旋转

先位移后再旋转，由于先位移时所有图片的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的力量，希望对你有帮助，或者就当自己做个笔记。

言

前段时间小编刷抖音的时候，刷到了咱们前端小伙伴制作的3D炫酷相册，居然那么火，细思一下，随着3D动画的普及，广泛的运作在各个平台，各官网都在实现3D页面。它可以更接近于真实的展示我们的产品和介绍，带来极强的视觉冲击感。所以说，为了让自己更加优秀，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;
 /* 规定如何在 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

喜欢小编的可以点个赞关注小编哦，小编每天都会给大家分享文章。

我自己是一名从事了多年的前端老程序员，小编为大家准备了新出的前端编程学习资料，免费分享给大家！

如果你也想学习前端，那么帮忙转发一下然后再关注小编后私信【1】可以得到我整理的这些前端资料了（私信方法：点击我头像进我主页有个上面有个私信按钮）

在线咨询

上一篇：如何使用纯CSS设计HTML5新LOGO？
下一篇：经典美食佳肴探索味蕾之旅，那些你不可错过的广东美食网页！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

40岁大叔学习编程之 JavaScript 相册特效

言

正文：

您的项目需求