开学了就好忙啊，Three.js 学习的进度很慢。。。
备课备课才是王道。
更一篇 JS + CSS3 的内容，做一个图片墙。
其核心要点是把图片摆成这个样子：
看上去这个布局很复杂，其实很简单。其思路是：
- 所有图片放在一个 div.box 里，并且绝对定位，方便调整位置。
- 每个图片旋转一个度数。这里有5张图，每个图旋转的度数就是 index*72。为啥 72？因为 360 / 5 = 72 。
- 然后，每张图移动 z 轴 -500px。我这里是移动 -500px，具体值大家可以自行设定。
这其实好比一群人，专向对应度数后，往前或者往后移动相同的距离，就可以刚好围城一个圈。
理解这个思路后，剩下的好办了。
HTML：
<div class="box" id="box"><img src="../images/pic1.jpg" alt=""><img src="../images/pic2.jpg" alt=""><img src="../images/pic3.jpg" alt=""><img src="../images/pic4.jpg" alt=""><img src="../images/pic5.jpg" alt="">
</div>CSS：
*{margin: 0;padding: 0;
}
.box{width: 600px;height: 399px;}
body{perspective: 2500px; /* 透视 */height: 100vh;overflow: hidden;
}
.box{transform-style: preserve-3d; /* 3D 空间 */margin-left: auto;margin-right:auto;margin-top: 400px;position: relative;animation: ani 20s linear infinite; /* 自动旋转 */
}
.box img{position: absolute;backface-visibility: hidden;opacity: 0.5;transition:all 0.2s;
}
.box img:hover{ /* 加上交互 */opacity: 1;
}@keyframes ani {0%{transform: rotateY(0);}100%{transform: rotateY(360deg);}
}JS：
let box = document.getElementById("box");
let imgs = box.querySelectorAll("img");
// 遍历每张图片，设置每个图片的旋转 和 z轴位移。注意顺序！
imgs.forEach(function(value,index){value.style.cssText = `transform:rotateY( ${72*index}deg ) translateZ(-500px);`;
});完工~是不是超级简单~？
啊~有用的知识又增加了。
)
