一个简单的自动 3D 相册展示

我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！

前言

七夕之前学习做了一个 3D 相册展示，可以将图片换成你女朋友的头像，做成一个展示类的相册功能。主要使用 J S 和 css 实现的。 有个疑问：码上掘金能上传图片吗？在上面调试时图片无法显示，但看别人好像都能显示出图片？ 3D自动旋转相册的效果：

实现过程

其最主要的核心就是利用 css3 的 transform-style 属性。它是让转换的子元素保留3D转换。即是让某元素的子元素看起来位于三维空间内，对应值是 preserve-3d。

首先，需要定义 id 为 pics 的 div 作为外层来装载所有的图片。

 <div id="dragBox">
      <div id="pics">
        <img src="./images/1.png"></img>
        <img src="./images/2.png"></img>
        <img src="./images/3.png"></img>
        <img src="./images/1.png"></img>
        <img src="./images/3.png"></img>
        <img src="./images/2.png"></img>
        <img src="./images/1.png"></img>
        <img src="./images/3.png"></img>
      </div>
    </div>

增加布局和图片是平面的效果，所以需要增加 transform 属性

#dragBox,#pics{
    position: relative;
    display: flex;
    margin: auto;
    transform:rotateX(-20deg);
    transform-style: preserve-3d;
}

其中， transform:rotateX(-20deg) 是通过指定角度参数对原元素指定一个2D旋转，所以 rotateX 就是围绕X轴旋转。还有一个透视参数：perspective------变换效果 像素越小离舞台越近 像素越大 离舞台越远 近大远小的透视效果。

所以，transform-style 和 perspective 属性可以展现出 3D 的效果。

接下来设置图片的旋转运动的效果。每张图片绕着一圈旋转时，图片也是绕着 Y轴旋转。所以只需要让每一张图片都根据 Y 和 Z 轴旋转运动即可。

const init =function(delayTime){
   for(var i = 0; i < len;i++){
      // 元素加动画 展开
      images[i].style.transform = 'rotateY(' + deg * i + 'deg) translateZ('+radius+'px)'; 
      images[i].style.transition="transform 0.5s"
      images[i].style.transitionDelay=delayTime||(len-i)/4+"s";
     }
}

要让图片一直制动旋转，只需要使用js 设置一个定时器，每隔几秒旋转一个角度就可以实现整个自动旋转的过程。

 setTimeout(init,30);

实用性

效果展示很好看，且可以继续在此功能扩展，比如添加音乐，点击图片时放大图片。 我把我的一台闲置的平板电脑上显示这个3D相册的效果，并且将其挂在墙上，做成一个动态的壁画。