开学了就好忙啊，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);
`;
});完工~是不是超级简单~？
啊~有用的知识又增加了。
