58行代码实现3D相册

前端初学者，目前是大三狗。 本专业不感兴趣，所有自学前端打算转行。 第一次写文章，请各位大佬多多指教。

刚看完htmlt与css基础部分，js还在学习中，做了一个小练习。

暂时没有截gif的软件，先用截图代替吧。 效果图就是这样：

步骤： 1.构建立体均匀分布的图片 2.使图片旋转

使用到的知识点： css部分： 1.transform 2.transform-style 3.perspective 4.transition 5.animation js部分： setInterval

transform属性:

transform: none|transform-functions;
复制代码

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

transform-style transform--style属性指定嵌套元素是怎样在三维空间中呈现。

transform-style: flat|preserve-3d;
复制代码

这里我们需要用到的是perserve-3d 使用这个属性必需先使用transforn属性

perspective 这个属性是允许你改变3D视图的透视方式。 值越大距离眼睛月圆，值越小距离眼睛越近。

transition transition属性是一个速记属性有四个属性：transition-property, transition-duration, transition-timing-function, and transition-delay

transition: property duration timing-function delay;
复制代码

• transition-property 指定CSS属性的name，transition效果

• transition-duration transition效果需要指定多少秒或毫秒才能完成

• transition-timing-function 指定transition效果的转速曲线

• transition-delay 定义transition效果开始的时候

animation animation和transition这两个属性我觉得我讲不清楚，大家还是自己去查一下吧。

首先定义一个div来存放图片

<div class="wrap">
        <div id="photos">
            <img class="pic1" src="pic/3D/favorite1.jpg" alt="">
            <img class="pic2" src="pic/3D/favorite2.jpg" alt="">
            <img class="pic3" src="pic/3D/favorite3.jpg" alt="">
            <img class="pic4" src="pic/3D/favorite9.jpg" alt="">
            <img class="pic5" src="pic/3D/favorite5.jpg" alt="">
            <img class="pic6" src="pic/3D/favorite6.jpg" alt="">       
        </div>
</div>
复制代码

设置css

*{
         padding: 0px;
         margin: 0px;
     }   
     body{
         background-color: black;
     }
     .wrap{
         perspective: 1600px;
         
     }
     #photos{
         width: 300px;
         height:300px;
         margin: 200px auto;
         transform-style: preserve-3d;
         transition: all .5s ease;
         animation: spin 20s linear infinite;
         
     }
     img{
         width: 250px;
         height: 300px;
         margin-bottom: 100px;
         position: absolute;
         border: 1px solid gray;
         border-radius: 20px;
         opacity: 0.8;
     }
复制代码

此时图片应该是都重叠在一起的，用js使图片立体分布均匀

首先 创建变量获得photos对象 存放photo下的img 获得img的长度

使图片立体分布均匀，这一步其实用css可以单独设置，但是重复工作太多，所以直接用js即可。 遍历phoNum，为其添加style 这里的rotate指的是以屏幕为面。水平向右为X轴，竖直向上为y轴，垂直屏幕向外为z轴，所以我们只需要设置y轴的值，即trotateY() 注意：我们添加的图片没有上面和底下的 如果设置为上下面也有图片，style需要单独在cssh中设置。我尝试添加了顶面，用js设置，但是没搞出来，如果有哪位大佬知道怎么弄，请指教。

var phoArr = document.getElementById("photos");
var phoNum = phoArr.getElementsByTagName("img");
var phoLen = phoNum.length;
var ang = Math.floor( 360/phoLen);
    for(var i = 0; i < phoLen; i++){
        phoNum[i].style = 'transform : rotateY(' + ang*i + 'deg) ';
    }
复制代码

此时应该是这样的效果：

使图片分散开，需要添加translateZ()， 这里设置translateZ为300

for(var i = 0; i < phoLen; i++){
        phoNum[i].style = 'transform : rotateY(' + ang*i + 'deg) translateZ(300px) ';
    }
复制代码

这样图片就是均匀分散开的。

最后添加动画使图片动起来 使用@keyframes可以使图片动起来。 它是通过通过从一个样式过渡到另一个样式

具体的用法有很多，不一一细说了。

这里我只设置了水平方向的转动，即只设置了rotateY() 从0到360deg，正好为一圈 若设置了rotateX()则在竖直方向也会转动

@keyframes spin {
         from {
             transform: rotateY(0);
         }
         to {
             transform: rotateY(360deg);
         }
 }
复制代码

结束。

本文参考：

纯css 3D立方体动画特效 菜鸟教程css及js部分