用CSS3 animation模拟摩天轮旋转动画效果

这次我们来实现一个简单又很有意思的动画效果，完全由CSS 的animation来实现，素材和源码来自于其他网站，个人对源码做了一些改动优化
完成后的效果——旋转效果 （github pages打开特别慢，要等一下）
主要的方法由三步组成：
1、让背景图片在十秒内完成360度旋转，模拟出摩天轮的旋转效果；
2、将三张人物图片定位在背景图上，随背景转动；
3、为三张图片额外创建一个animation，让人物图片在十秒内逆时针旋转360度，这样人物图自始至终都是垂直于水平线。
HTML代码：

<div class="container">
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/background.png">
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/person1.png">
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/person2.png">
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/person3.png">
</div>

第一步代码：

div.container{
    margin: 100px auto;
    width: 800px;
    position: relative;
    -webkit-animation: rotate 10s infinite linear;
    -o-animation: rotate 10s infinite linear;
    animation: rotate 10s infinite linear;
}
@keyframes rotate{
    0%{
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    }
}

原本作者的代码是为背景设定一个1000s的动画，然后在动画时效内旋转36000度，这样同样可以实现动画。这个设定很巧妙，但是缺点很明显，在1000s后动画就停了，一般这种动画多用在网站的背景上面，所以很显然这个办法不可取，而且这种方法到了后面动画会越转越快……不知道是什么原因，有懂的同学可有告诉我下。
解决的办法很简单，animation是有infinite属性的，设置以后，动画就会无限循环下去，后面的人物图逆时针旋转也是这样设置。

第二步代码：

img:nth-child(2){
    position: absolute;
    top: 80px;
    left: 400px;
    animation: re-rotate 10s infinite linear;
    -webkit-animation: re-rotate 10s infinite linear;
    -moz-animation: re-rotate 10s infinite linear;
    transform-origin:top center;
    -webkit-transform-origin:top center;
    -moz-transform-origin:top center;
}
img:nth-child(3){
    position: absolute;
    top: 700px;
    left: 400px;
    animation: re-rotate 10s infinite linear;
    -webkit-animation: re-rotate 10s infinite linear;
    -moz-animation: re-rotate 10s infinite linear;  
    transform-origin:top center;
    -webkit-transform-origin:top center;
    -moz-transform-origin:top center;
}
img:nth-child(4){
    position: absolute;
    top: 300px;
    left: 0px;
    animation: re-rotate 10s infinite linear;
    -webkit-animation: re-rotate 10s infinite linear;
    -moz-animation: re-rotate 10s infinite linear;
    transform-origin:top center;
    -webkit-transform-origin:top center;
    -moz-transform-origin:top center;
}

这部分很简单，没什么好说的，就是兼容问题写了一堆代码，看起来有点烦。
第三步代码：

@keyframes re-rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(-360deg);
    }
}

第三步和上面的一样，设置动画的百分比，如果想控制旋转的速度，可以在keyframes里面具体设置。
以上，就是这个动画的全部代码，很简单，但是很有意思，类似的动画可以用在很多地方，分享给大家。