旋转木马图片——转转转！！

今天做了一个小demo，内容是将几张图片做成像游乐园里的旋转木马一样，在网页上自动旋转，非常好玩！

最终效果：

不过，这是会旋转的呦！

结构其实很简单，就是：

一个舞台，一个容器，里面放上几张图片，其主要的工作量在css上：

<style>
            #stage{
                -webkit-perspective:800px;
            } 
         @keyframes rotateA{
            0%{-webkit-transform:rotatey(0deg) rotatex(0deg);}
            16%{-webkit-transform:rotatey(60deg) rotatex(0deg);}
            32%{-webkit-transform:rotatey(120deg) rotatex(0deg);}
            48%{-webkit-transform:rotatey(180deg) rotatex(0deg);}
            64%{-webkit-transform:rotatey(240deg) rotatex(0deg);}
            80%{-webkit-transform:rotatey(300deg) rotatex(0deg);}
            100%{-webkit-transform:rotatey(360deg) rotatex(0deg);}
      }
            .container{
                width:800px;
                height:400px;
                /*border:1px solid red;*/
                position:relative;
                top:150px;
        left:300px;

                -webkit-transform-style: preserve-3d;
                -webkit-transition: -webkit-transform 1s;
                -webkit-animation:rotateA 10s linear infinite;                
            }
            .container img{
                width:100px;
                height:100px;
                
                position:absolute;
                top:150px;
        left:300px;
              -webkit-transition: opacity 1s, -webkit-transform 1s;
                
            }
        
            .container img:nth-child(1){
                     -webkit-transform:translateZ(200px);
            }
            .container img:nth-child(2){
                     -webkit-transform:rotateY(45deg) translateZ(200px);
            }
            .container img:nth-child(3){
                     -webkit-transform:rotateY(90deg) translateZ(200px);
            }
            .container img:nth-child(4){
                     -webkit-transform:rotateY(135deg) translateZ(200px);
            }
            .container img:nth-child(5){
                     -webkit-transform:rotateY(180deg) translateZ(200px);
            }

            .container img:nth-child(6){
                     -webkit-transform:rotateY(225deg) translateZ(200px);
            }
            .container img:nth-child(7){
                     -webkit-transform:rotateY(270deg) translateZ(200px);
            }

            .container img:nth-child(8){
                     -webkit-transform:rotateY(315deg) translateZ(200px);
            }
            /*calc(30deg + 45deg*/
        </style>

先给舞台设置一个透视点，然后该透视点为中心，利用transform的角度旋转rotate属性函数，位移translate属性函数，将八张图片分布于舞台的八个方向，两两间成45度角，最后利用css的animation动画技术，旋转容器container，就做出了图片的旋转木马特效。