旋转木马效果相册小案例

成品如下

该案例运用了3d旋转位移transform属性，代码很简练，难点是因为是三维效果，需要有空间感，在脑海里要构建3d画面。每张照片自转的同时也在围绕小人在公转，公转的圆是还是上下起伏的。下面跟着我来看如何实现这些效果

html代码

图片少放点多放点没关系。但会涉及到旋转的度数问题。我放了10张。

<section>
        <img src="images/pic1.jpg" alt="">
        <img src="images/pic2.png" alt="">
        <img src="images/pic3.png" alt="">
        <img src="images/pic4.png" alt="">
        <img src="images/pic5.jpg" alt="">
        <img src="images/pic6.png" alt="">
        <img src="images/pic7.png" alt="">
        <img src="images/pic8.png" alt="">
        <img src="images/pic9.png" alt="">
        <img src="images/pic10.png" alt="">
    </section>

css代码

transform-style属性必须在添加3d效果之前加上，因为它的作用是让父元素成为一个3d的舞台，充当容器的作用。不加你在游览器上就看不到效果。一开始，所有的照片和公转中心的小人是叠在一起的。要形成公转，就需要先沿着公转圆的半径（z轴）进行位移，然后沿着z轴旋转一个度数（数值不能随便写。我这里是360/10=36度），度数是依次递增的。这里有一个问题，就是沿着z轴旋转，原点css默认是照片本身的中心。所以需要改变原点的位置。原点要沿着z轴位移，也就是公转的半径。

section{
        width:280px;
        height:400px;
        background:url(images/a.gif) no-repeat center;
        background-size:50% 50%;
        position:fixed;
        left:0;right:0;
        top:0;bottom:0;
        margin:auto;
        transform-style:preserve-3d;
        animation:imgRotate 10s infinite linear;
    }
section img{
    display:block;
    width:280px;
    height:400px;
    position:absolute;
    transform-origin:center center -600px;
}
img:nth-child(1){
    transform:translateZ(600px) rotateY(36deg);
}
img:nth-child(2){
    transform:translateZ(600px) rotateY(72deg);
}
img:nth-child(3){
    transform:translateZ(600px) rotateY(108deg);
}
img:nth-child(4){
    transform:translateZ(600px) rotateY(144deg);
}
img:nth-child(5){
    transform:translateZ(600px) rotateY(180deg);
}
img:nth-child(6){
    transform:translateZ(600px) rotateY(216deg);
}
img:nth-child(7){
    transform:translateZ(600px) rotateY(252deg);
}
img:nth-child(8){
    transform:translateZ(600px) rotateY(288deg);
}
img:nth-child(9){
    transform:translateZ(600px) rotateY(324deg);
}
img:nth-child(10){
    transform:translateZ(600px) rotateY(360deg);
}

最后，照片公转时上下起伏，是因为在旋转的同时，在X轴上也移动了。我在最开始写的时候只写了0%、50%、100%三个帧。结果公转的效果并不怎么好。就又加了25%、75%。公转的速度系统默认是先快后慢，父元素section的animation属性那里要改成linear匀速

@keyframes imgRotate{
            0%{transform:rotateX(0deg) rotateY(0deg);}
            25%{transform:rotateX(30deg) rotateY(180deg);}
            50%{transform:rotateX(0deg) rotateY(360deg)}
            75%{transform:rotateX(-30deg) rotateY(540deg);}
            100%{transform:rotateX(0deg) rotateY(720deg)}
        }