CSS3技巧37：JS+CSS3 制作旋转图片墙

开学了就好忙啊，Three.js 学习的进度很慢。。。

备课备课才是王道。

更一篇 JS + CSS3 的内容，做一个图片墙。

 其核心要点是把图片摆成这个样子：

看上去这个布局很复杂，其实很简单。其思路是：

1. 所有图片放在一个 div.box 里，并且绝对定位，方便调整位置。
2. 每个图片旋转一个度数。这里有5张图，每个图旋转的度数就是 index*72。为啥 72？因为 360 / 5 = 72 。
3. 然后，每张图移动 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);
    `;
});

完工~是不是超级简单~？

啊~有用的知识又增加了。