CSS3 盒子翻转轮播效果 

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>CSS3 3D场景展示</title> 
    <style type="text/css"> 
    body {
      background-color: #D42FA0;
      font-size: 12px;
    }

    #content {
      width: 100%;
      height: 300px; 
      -moz-transform-style: preserve-3d;
      -moz-perspective-origin:50% 40px; 
      -moz-perspective: 800px;
    }
    #scene {
      margin: 120px auto;
      width: 520px;
      height: 260px; 
      -moz-transform-style: preserve-3d;
      -moz-perspective-origin: 50% 130px;
    }
    .box {
      position: absolute; 
      height: 260px;
      width: 520px;
      -moz-transform-style: preserve-3d;
      /*-moz-transition: transform 1s linear;*/
    }
    .box > div {
      position: absolute;
      height: 260px;
      width: 520px;
      color:#000;
      /*opacity: 0.5;*/
      border: 1px solid #FFF;
      overflow:hidden; 
      /*-moz-backface-visibility: hidden;*/
    } 
    .box > .side_1 {
      background-color: #3CC42E;   
      -moz-transform: rotateY(90deg) translateZ(130px);
    }
    .box > .side_2 {
      background-color: #57BC30;   
      -moz-transform: rotateY(180deg) translateZ(130px);
    }
    .box > .side_3 {
      background-color: #1F3889;   
      -moz-transform: rotateY(270deg) translateZ(130px);
    }
    .box > .side_4 {
      background-color: #E4C207;   
      -moz-transform: rotateY(0deg) translateZ(130px);
    }
    .box > .side_5 {
      background-color: #FFFFFF;   
      -moz-transform: rotateX(90deg) translateZ(130px);
    }
    .box > .side_6 {
      background-color: #000000;   
      -moz-transform: rotateX(-90deg) translateZ(130px);
    }
    /*.box:hover{-moz-transform: rotate3d(1 , 0, 0, -90deg);}*/
    
    .box .side_2 div{-moz-transform: rotateX(180deg) rotateY(180deg); height:260px; width:520px; overflow:hidden;}
    </style>  
    

</head> 
<body>  
  <div id="content"> 
    <div id="scene"> 
      <div id="box_A1" class="box"> 
          <!--<div class="side_1"></div>-->
        <div class="side_2"><div><img src="ninja.jpg" height="260" width="520" /></div></div> 
        <!--<div class="side_3"></div>-->
        <div class="side_4"><img src="ninja_o.jpg" height="260" width="520" /></div> 
        <div class="side_5"><img src="ninja_s.jpg" height="260" width="520" /></div> 
        <div class="side_6"><img src="pirates.jpg" height="260" width="520" /></div> 
      </div>  
    </div> 
  </div> 
  <p style="text-align:center;">
  <a href="javascript:" id="prev">prev</a><a href="javascript:" id="next" style="margin-left:100px;">next</a>
  </p>
</body> 
<script>
window.onload=function(){
    var prev=document.getElementById('prev');
    var next=document.getElementById('next');
    var x=0;
    var box=document.getElementById('box_A1');
    var y;
    function css(i){
        
        var timer=setInterval(function(){
            y=x>y?y+1:y-1;
            box.style.MozTransform="rotate3d(1 , 0, 0, "+y+"deg)"
            if(y==x){
                clearInterval(timer);
                if(i<0||i>359){
                    x=i<0?i+360:i-360;
                }
            }
        },10)
        
    }
    prev.onclick=function(){
        y=x;
        x+=90;
        css(x);
    }
    next.onclick=function(){
        y=x;
        x-=90;
        css(x);
    }
}
</script>
</html>

CSS3只加了-MOZ-,请用FF打开.随手玩的.

posted @ 2012-12-05 14:38  zwei1989  阅读(2314)  评论(0)  编辑  收藏  举报