css实现3d相册

没有js，css也能玩出酷炫的效果

一般我们想要达到一些动画效果的时候都会第一时间想到js根据各种条件 触发各种操作，来达到我们想要看到的动画效果，前面分享的飞机大战就是满屏的js代码，各种条件的判断，什么阶段执行什么函数，什么情况出现什么效果，麻烦一点的效果都是很多js实现的。
飞机大战
但是今天，我们发现css也能实现一些简单的动画，而这些简单的动画用好了，也能有非常大的视觉冲击。

思路

3D相册，突出在3D的效果上，要有一种立体感。
我们利用6张图片，通过transform的rotateY和rotateX来旋转方向 translateZ来拉伸空间距离感。模拟筛子的六面。
先给一个大盒子用来当框架，再用一个盒子装所有的图片，先传6张图片。

<div class="wrap">
            <div class="cube">
                <span class="In_Front">
                    <img src="img/7.jpg" class="in_pic"/>
                </span>
                <span class="In_Back">
                    <img src="img/8.jpg" class="in_pic"/>
                </span>
                <span class="In_Top">
                    <img src="img/9.jpg" class="in_pic"/>
                </span>
                <span class="In_Bottom">
                    <img src="img/10.jpg" class="in_pic"/>
                </span>
                <span  class="In_Left">
                    <img src="img/11.jpg"  class="in_pic"/>
                </span>
                <span class="In_Right">
                    <img src="img/12.jpg" class="in_pic"/>
                </span>
            </div>
        </div>

再用css依次通过旋转来让图片到达各自的位置
盒子的样式就不写了 写图片旋转的角度

.cube span{ //因为用的是span标签当图片的存放器 所以需要先转款、换成块元素 再给宽高 定位
                display: block;
                width: 100px;
                height: 100px;
                position: absolute;
                top: 50px;
                left: 50px;
            }
.cube .in_pic{//图片统一设置成大小一致，避免图片尺寸不同导致不能达到完美的立方体。
                width: 100px;
                height