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

stones4zd

于 2024-02-27 22:47:48 发布

阅读量818

点赞数 12

分类专栏： HTML5_CSS3 文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/weixin_42703239/article/details/136333565

版权

HTML5_CSS3 专栏收录该内容

58 篇文章 14 订阅

订阅专栏

本文讲述了作者在开学期间学习Three.js的进度缓慢，但通过分享如何使用CSS3、HTML和JavaScript创建一个图片墙的教程，展示了将五张图片排列成环形布局的思路和代码实现，包括使用绝对定位、旋转和Z轴位移等技术。

摘要由CSDN通过智能技术生成

开学了就好忙啊，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);
    `;
});

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

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