CSS3:变换和动画 

<html>
  <style>
    .container{      
      -webkit-perspective: 800;   
      -webkit-perspective-origin: 50% 40%;  
    }
    .img{width:200px; padding:20px;}
    .trans{
      border:1px solid #333;height:100px;width: 200px;margin: 20px; float: left;
    }
    .trans_rotata{
      -webkit-transform:rotate(7deg);
    }
    .trans_rotataX{
      -webkit-transform:rotateX(60deg);
    }

    .trans_3d{
      -webkit-transform:rotate3d(1,-1,0,60deg)
    }

    .opacity{
      opacity: 0.2;
    }

    .trans_scale{
      -webkit-transform:scale(1.1, 1.1);
    }

    .trans_scale3D{
      -webkit-transform:scale3D(1.1, 1.1, 1.1);
    }

    .img:hover{
      -webkit-transform:scale3D(1.1, 1.1, 1.1);
    }
    .trans_skew{
      -webkit-transform:skew(30deg,10deg);
    }

    @-webkit-keyframes spin {  
     from {  
       -webkit-transform: rotateY(0);  
     }  
     to {  
       -webkit-transform: rotateY(-360deg);  
     }  
   }  
   .cube {  
     margin: 0 auto;  
     width: 200px;  
     height: 200px;  
     position: relative;  
     -webkit-animation: spin 8s infinite linear;  
     -webkit-transform-style: preserve-3d;  
   }  
   .cube .rect {
     position: absolute;
     top: 0px;
     left: 0px;  
     width: 200px;  
     height: 200px;  
     border-radius: 5px;  
     border: 1px solid #ccc;  
     font-size: 125pt;  
     text-align: center;  
     line-height: 200px;  
     background-color: #bbb;  
     opacity: 0.5;  
   }  
   .cube .cubeA {    
     -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);  
   }  
   .cube .cubeB {  
     -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px);  
   }  
   .cube .cubeC {  
     -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);  
   }  
   .cube .cubeD {  
     -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);  
   }  
   .cube .cubeE {  
     -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);  
   }  
   .cube .cubeF {  
     -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(0deg) translateZ(100px);  
   } 

  </style>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script>
    $(document).ready(function(){
      $(".trans_rotata").click(function(){
        var now = "3700";
       $(this).animate({deg: 5000},{
        step: function(now,fx) {
          $(this).css('-webkit-transform','rotate('+now+'deg)');
          $(this).css('-moz-transform','rotate('+now+'deg)'); 
          $(this).css('-ms-transform','rotate('+now+'deg)');
          $(this).css('-o-transform','rotate('+now+'deg)');
          $(this).css('transform','rotate('+now+'deg)');  
        },
        duration:'slow'
        },'linear');
      })
      
    })
  </script>

  <div class="container">
    <div class="trans trans_rotata"></div>
    <div class="trans"></div>
    <div class="trans trans_rotataX"></div>
    <div class="trans trans_skew"></div>
    <br>
    <img class="img"src="http://h.hiphotos.baidu.com/image/w%3D2048/sign=d3c034d4e4cd7b89e96c3d833b1c43a7/a8773912b31bb051ffde8736347adab44aede031.jpg">
    <img class="img trans_rotataX" src="http://h.hiphotos.baidu.com/image/w%3D2048/sign=d3c034d4e4cd7b89e96c3d833b1c43a7/a8773912b31bb051ffde8736347adab44aede031.jpg">

    <img class="img trans_3d" src="http://h.hiphotos.baidu.com/image/w%3D2048/sign=d3c034d4e4cd7b89e96c3d833b1c43a7/a8773912b31bb051ffde8736347adab44aede031.jpg">
    <img class="img trans_3ds" src="http://h.hiphotos.baidu.com/image/w%3D2048/sign=d3c034d4e4cd7b89e96c3d833b1c43a7/a8773912b31bb051ffde8736347adab44aede031.jpg">
    <img class="img trans_scale" src="http://h.hiphotos.baidu.com/image/w%3D2048/sign=d3c034d4e4cd7b89e96c3d833b1c43a7/a8773912b31bb051ffde8736347adab44aede031.jpg">
    <img class="img trans_scale3D opacity" src="http://h.hiphotos.baidu.com/image/w%3D2048/sign=d3c034d4e4cd7b89e96c3d833b1c43a7/a8773912b31bb051ffde8736347adab44aede031.jpg">


    <div class="cube"><!--用于为子元素设置3D效果，同时围绕的坐标轴也是以此元素为基础。若在这里放景深，跳不出来效果-->  
        <div class="cubeA rect">1</div><!--具体效果看css就明白了。旋转下就好-->  
        <div class="cubeB rect">2</div>
        <div class="cubeC rect">3</div>
        <div class="cubeD rect">4</div>  
        <div class="cubeE rect">5</div>  
        <div class="cubeF rect">6</div>
    </div>          
  </div>
</html>

 

posted @ 2017-04-06 08:53  行动派  阅读(194)  评论(0)    收藏  举报