使用css3构建一个摩天轮旋转

一、摩天轮构建思路
1、自身绕圆旋转（修改旋转轴心）
    @keyframes spin{
    to{transform: rotate(1turn);}
    }
    .box .ball{
    animation:spin 3s infinite linear;
    transform-origin: 50% 150px;

2、绕圆旋转，内容不转
    @keyframes spin{
        to{transform: rotate(1turn);}
    }
    .box .ball{
        animation:spin 3s infinite linear;
        transform-origin: 50% 150px;
    }
    .box .inner{
       animation:inherit;/*继承上级的属性*/
        animation-name:spin-reverse;

    }

二、实践

demo1:

    
    
    


    

        

            
ball
        
    

demo2:

    
    
    



    

        

            
ball-1
        
    
    

        

            
ball-2
        
    
    

        

            

ball-3
        
    



click Me

demo3:

    
    
    



    

        

            
ball-1
        
    
    

        

            
ball-2
        
    
    

        

            

ball-3
        
    



click Me

文章用到的图片：

quan1: 

用到的css3新特性：

    pointer-events : auto(启用事件，默认值)|none(禁用事件)

三、总结

    demo1:自身绕圆旋转,内容不转
    demo2:在demo1的基础上，新增二个圆圈绕着大圆转
    demo3:在demo2的基础上做了优化

参考地址：http://caibaojian.com/css3-animate-spin.html