CSS旋转木马

通过CSS技术可以实现将图片旋转，甚至达到类似旋转木马的效果，如下：

先建立六个盒子：
<section> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </section>

然后再开始对这里六个盒子进行修饰:
因为旋转木马需要用3D效果显示，所以先为body加上perspective：

body { perspective: 1000px; }

再为盒子的父级加上3D效果：

section{ transform-style: preserve-3d; }

先为盒子和其父级加上定位(子绝父相)：

section div { position: absolute; top: 0; left: 0; }
section { position: relative; }

再给盒子父级限定长和宽：

section{ width: 208px; height: 146px; }

对盒子的选择,方便起见使用:nth-child(n)

我这个旋转木马的程序选择放六张图片旋转，分析得到六张图片沿Y轴旋转依次增加 60deg 例：

section div:nth-child(3) {
transform: rotateY(120deg) translateZ(300px); background-image: url(material/JZM4.png); width: 100%; height: 100%;
}

我想达到一个六张图片围绕一张图片转的效果，因此在盒子父级里也加入一张图片：

section{ background: url(material/JZM.png) no-repeat; }

最后给六个盒子依次加入不同的图片：

section div:nth-child(3) { background-image: url(material/JZM5.png); }

切记放置图片时先旋转图片再移动：

transform: rotateZ(120deg) translateY(300px);
transform: rotateY(120deg) translateZ(300px);√

现在开始做动画的内容：

设定每一次动画，所有图片旋转 360deg :

@keyframes rotate {

        0% {
            transform: rotateY(0);
        }

        100% {
            transform: rotateY(360deg);
        }
    }

为动画设置相应的属性：

animation: rotate 5s linear infinite;

最后加上一个鼠标指到图片时动画停止的效果：

section:hover { animation-play-state: paused; }

这样一个旋转木马就做好了

以下是效果图: