3D旋转相册（纯CSS）

最开始想简单一点，不要那么多盒子。就简单除暴的直接用了img。

此时的html代码：

    <div class="photo">
        <div class="cube">
            <img src="img/1.jpg" alt="" class="small">
            <img src="img/2.jpg" alt="" class="small">
            <img src="img/3.jpg" alt="" class="small">
            <img src="img/4.jpg" alt="" class="small">
            <img src="img/5.jpg" alt="" class="small">
            <img src="img/6.jpg" alt="" class="small">
        </div>
        <div class="cube">
            <img src="img/1.jpg" alt="" class="big">
            <img src="img/2.jpg" alt="" class="big">
            <img src="img/3.jpg" alt="" class="big">
            <img src="img/4.jpg" alt="" class="big">
            <img src="img/5.jpg" alt="" class="big">
            <img src="img/6.jpg" alt="" class="big">
        </div>
    </div>

发现效果有些奇怪，当旋转的时候可以看到img的反面。尤其的当图片的透明度为百分百时。（如下图，小盒子的图片看着层叠）

这个感觉像是层级的问题。可它又是旋转的动态的，一时间不知道怎么办了。但是当我将它换成了div时，又不会出现这样的问题了。于是这个想法又仿佛不对了…
于是我猜测是因为img的颜色暗了，但是我将它所有都换成一个亮色的图片，还是会出现这样的问题，于是这个猜测还是不对的…
（于是这个问题我一直没想明白，暂且搁置）

然后发现了第二个问题：外面的盒子和里面的盒子有前后关系的（如上图，会出现本该在后面的大图片跑到了小盒子的前面来了）

这时候的html：

    <div class="photo">
        <div class="cube">
            <img src="img/1.jpg" alt="" class="small">
            <img src="img/2.jpg" alt="" class="small">
            <img src="img/3.jpg" alt="" class="small">
            <img src="img/4.jpg" alt="" class="small">
            <img src="img/5.jpg" alt="" class="small">
            <img src="img/6.jpg" alt="" class="small">
        </div>
        <div class="cube">
            <img src="img/1.jpg" alt="" class="big">
            <img src="img/2.jpg" alt="" class="big">
            <img src="img/3.jpg" alt="" class="big">
            <img src="img/4.jpg" alt="" class="big">
            <img src="img/5.jpg" alt="" class="big">
            <img src="img/6.jpg" alt="" class="big">
        </div>
    </div>

于是我调整了HTML代码以及相应样式，得到了以下的模样：

可以说是完成了最初设想。

css代码：

        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: black;
        }

        .big {
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.6;
        }

        .small {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
        }

        .photo {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            perspective: 800px;
        }

        .cube {
            position: absolute;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            transition: all 1s;
        }

        .cube {
            animation: run 10s linear infinite;
        }

        @keyframes run {
            from {
                transition: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }

            to {
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }

        /* 外面的样式 */
        .top2 {
            background: url(img/1.jpg);
            background-size: 100% 100%;
            transform: rotateX(90deg) translateZ(120px);
        }

        .bottom2 {
            background: url(img/2.jpg);
            background-size: 100% 100%;
            transform: rotateX(-90deg) translateZ(120px);
        }

        .left2 {
            background: url(img/3.jpg);
            background-size: 100% 100%;
            transform: rotateY(90deg) translateZ(120px);
        }

        .right2 {
            background: url(img/4.jpg);
            background-size: 100% 100%;
            transform: rotateY(-90deg) translateZ(120px);
        }

        .front2 {
            background: url(img/5.jpg);
            background-size: 100% 100%;
            z-index: 1;
            transform: translateZ(120px);
        }

        .rear2 {
            background: url(img/6.jpg);
            background-size: 100% 100%;
            transform: translateZ(-120px);
        }

        /* 里面的样式 */
        .top1 {
            background: url(img/1.jpg);
            background-size: 100% 100%;
            transform: rotateX(90deg) translateZ(50px);
        }

        .bottom1 {
            background: url(img/2.jpg);
            background-size: 100% 100%;
            transform: rotateX(-90deg) translateZ(50px);
        }

        .left1 {
            background: url(img/3.jpg);
            background-size: 100% 100%;
            transform: rotateY(90deg) translateZ(50px);
        }

        .right1 {
            background: url(img/4.jpg);
            background-size: 100% 100%;
            transform: rotateY(-90deg) translateZ(50px);
        }

        .front1 {
            background: url(img/5.jpg);
            background-size: 100% 100%;
            z-index: 1;
            transform: translateZ(50px);
        }

        .rear1 {
            background: url(img/6.jpg);
            background-size: 100% 100%;
            transform: translateZ(-50px);
        }

        .cube:hover {
            animation-play-state: paused;
        }

        .cube:hover .top2 {
            transform: rotateX(90deg) translateZ(200px);
        }

        .cube:hover .bottom2 {
            transform: rotateX(-90deg) translateZ(200px);
        }

        .cube:hover .left2 {
            transform: rotateY(90deg) translateZ(200px);
        }

        .cube:hover .right2 {
            transform: rotateY(-90deg) translateZ(200px);
        }

        .cube:hover .front2 {
            transform: translateZ(200px);
        }

        .cube:hover .rear2 {
            transform: translateZ(-200px);
        }

HTML代码：

    <div class="photo">
        <div class="cube">
            <div class="small top1"></div>
            <div class="big top2"></div>
            <div class="small bottom1"></div>
            <div class="big bottom2"></div>
            <div class="small left1"></div>
            <div class="big left2"></div>
            <div class="small right1"></div>
            <div class="big right2"></div>
            <div class="small front1"></div>
            <div class="big front2"></div>
            <div class="small rear1"></div>
            <div class="big rear2"></div>
        </div>
    </div>

然而我在做着做着突然想到的：想让里面的盒子和外面的盒子不同的状态旋转动画，这为了解决前后问题，而改了html的构造无法完成了。有些遗憾，暂且没想到怎么做。