浪漫程序员会表白之抖音旋转立方体照片墙

在继上一次写了抖音上的时钟屏保，被我改造完用来表白后，有个兄弟给我评论，下一篇《淘宝上超火的水晶发光相册，被我买来用于表白》，恰好我之前写过这个小demo，于是我忙里偷闲把这个小demo的博客写了出来。

写在前面，源代码传到github上，在最下面，大家自行下载

这个小demo使用的是html + css3 + javascript实现，主要目的是锻炼我的编（撩）程（妹）技（能）术（力）！

闲言少许，书归正文，先看看效果图吧，还是因为csdn上只能上传5M的图，所以只能降帧做gif啦

上次写的小demo，还有兄弟希望适配一下移动端，所以我简单的使用媒体查询+JavaScript，适配了下移动端。上效果图

各位看官，如果效果图不尽人意

因为在移动端没用鼠标悬浮事件，所以我改成直接将立方体放大的效果。

---

我在写这个项目的最初目的是为了练习一下css3中的过渡、变换和动画，所以在立方体部分几乎都是由css3来完成。我建议大家在看这个项目之前，先学习一下css3的新语法。学成之后，再做这个小demo的话，你的css3过渡、变换和动画这部分就可以通神了！

我来依次解释这个小demo是如何一步一步完成的：

从上面的演示，我们可以清楚的看到，这个小demo，总共分成四个阶段：

1. 图片平铺的初始状态
2. 点击后，图片逐渐由小变大，再缩小（闪烁效果）
3. 图片旋转一周后逐渐缩小消失
4. 出现立方体，pc端鼠标悬浮时放大，移动端直接缓慢放大

在未点击时，图片是通过js生成的：

function initImg() {
   
   
    const imgBox = document.getElementsByClassName("imgBox")[0]
 	//生成图片的数量
    let index = 30
    if(document.body.clientWidth < 450){
   
   
        //适配移动端
        index = 15
    }
    for (var i = 0; i < index; i++) {
   
   
        var src = 0
        //随机生成图片的路径,大图片和小图片中随机
        if(Math.random()>0.5){
   
   
            src = Math.floor(Math.random() * 6) +1;
        }else{
   
   
            src = "0" + (Math.floor(Math.random() * 6) +1);
        }
        var img = document.createElement("img")
        img.src = `./img/${
     
     src}.png`
        imgBox.appendChild(img)
    }
}

代码中，获取了屏幕宽度，是为了适配移动端，当屏幕宽度小于450px时，只生成15张图片

注意图片的格式，因为后面需要变成立方体，且分大小，所以小图片是0开头的，大小是100 x 100像素，大图片是400 X 400像素，为了更清楚点，我还是放个图吧

下面就是点击时图片消失的效果了：

function bindEvent(){
   
   
    //获取按钮，设置点击事件
    const btn = document.getElementsByClassName("btn")[0]
    btn.onclick = function(e){