js实现旋转木马效果

效果图：

代码如下：

 
  
 
 
 
 
   .container {
    width: 210px;
    height: 140px;
    position: relative;
    margin: 50px auto 40px;
    border: 1px solid #CCC;
    -webkit-perspective: 1100px;
     -moz-perspective: 1100px;
      -o-perspective: 1100px;
 perspective: 1100px;
   }
   #carousel {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
 transform-style: preserve-3d;
   }
   .ready #carousel {
    -webkit-transition: -webkit-transform 1s;
     -moz-transition: -moz-transform 1s;
      -o-transition: -o-transform 1s;
 transition: transform 1s;
   }
   #carousel.panels-backface-invisible figure {
    -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
      -o-backface-visibility: hidden;
 backface-visibility: hidden;
   }
   #carousel figure {
    display: block;
    position: absolute;
    width: 186px;
    height: 116px;
    left: 10px;
    top: 10px;
    border: 2px solid black;
    line-height: 116px;
    font-size: 80px;
    font-weight: bold;
    color: white;
    text-align: center;
   }
   .ready #carousel figure {
    -webkit-transition: opacity 1s, -webkit-transform 1s;
     -moz-transition: opacity 1s, -moz-transform 1s;
      -o-transition: opacity 1s, -o-transform 1s;
 transition: opacity 1s, transform 1s;
   }
 #options{
  margin-top: 200px;
  width: 100%;
  text-align: center;
 }
 #options button{padding: 0.5em 1.5em;border: 2px solid #6699cc;background: #fff;}
  
 

 

   
    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10
    
11
    
12
    
13
    
14
    
15
    
16
    
17
    
18
    
19
    
20
   
  
  

   

    个数
    
   
   

    上一页
    下一页
   
   

    横竖切换
   
   

    背面可见切换
   
  
 
 
 
 
对不起,你的浏览器不支持CSS 3D transforms。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！