首页>>Jquery图片>>css 3D翻转图片动画(2013-10-30)

css 3D翻转图片动画

 本例用了2个js

jquery.easing.1.3.js和modernizr.2.5.3.min.js

演示页面可以查看

 

css 3D翻转图片动画
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

CSS Code
  1. <style type="text/css">  
  2.   
  3.     #note {  
  4.         font-size:11px;  
  5.         color:#333;  
  6.         padding:10px;  
  7.         border:1px solid #b99f35;  
  8.         background:#f4eccb;  
  9.         border-radius: 3px;  
  10.     }  
  11.       
  12.   
  13.   
  14.       
  15.     .thumb {  
  16.         display:block;  
  17.         width:200px;  
  18.         height:140px;  
  19.         position:relative;  
  20.         margin-bottom:20px;  
  21.         margin-right:20px;  
  22.         float:left;  
  23.     }  
  24.       
  25.         .thumb-wrapper {  
  26.             display:block;  
  27.             width:100%;  
  28.             height:100%;  
  29.         }  
  30.       
  31.         .thumb img {  
  32.             width:100%;  
  33.             height:100%;  
  34.             position:absolute;  
  35.             display:block;            
  36.                       
  37.         }  
  38.           
  39.         .thumb .thumb-detail {  
  40.             display:block;  
  41.             width:100%;  
  42.             height:100%;  
  43.             position:absolute;            
  44.             background:#eee;  
  45.             font-family:arial;  
  46.             font-weight:bold;  
  47.             font-size:16px;           
  48.         }  
  49.           
  50.         .thumb .thumb-detail a {  
  51.             display:block;  
  52.             width:100%;  
  53.             height:100%;  
  54.             text-transform:uppercase;  
  55.             font-weight:bold;     
  56.             color:#333;  
  57.             text-decoration:none;         
  58.             font-family: 'Open Sans', sans-serif;  
  59.             letter-spacing:-1px;  
  60.             padding:10px;     
  61.             font-size:18px;  
  62.         }         
  63.       
  64.     /* 
  65.     * Without CSS3 
  66.     */  
  67.     .thumb.scroll {  
  68.         overflow: hidden;  
  69.     }     
  70.       
  71.         .thumb.scroll .thumb-detail {  
  72.             bottombottom:-280px;  
  73.         }  
  74.       
  75.       
  76.     /* 
  77.     * CSS3 Flip 
  78.     */    
  79.     .thumb.flip {  
  80.         -webkit-perspective:800px;        
  81.            -moz-perspective:800px;  
  82.             -ms-perspective:800px;                
  83.              -o-perspective:800px;  
  84.                 perspective:800px;  
  85.     }  
  86.       
  87.         .thumb.flip .thumb-wrapper {  
  88.             -webkit-transition: -webkit-transform 1s;  
  89.                -moz-transition: -moz-transform 1s;  
  90.                 -ms-transition: -moz-transform 1s;  
  91.                  -o-transition: -moz-transform 1s;  
  92.                     transition: -moz-transform 1s;  
  93.             -webkit-transform-style: preserve-3d;  
  94.                -moz-transform-style: preserve-3d;             
  95.                 -ms-transform-style: preserve-3d;             
  96.                  -o-transform-style: preserve-3d;             
  97.                       transform-style: preserve-3d;           
  98.         }  
  99.           
  100.         .thumb.flip .thumb-detail {  
  101.             -webkit-transform: rotateY(-180deg);  
  102.                -moz-transform: rotateY(-180deg);  
  103.                 -ms-transform: rotateY(-180deg);  
  104.                  -o-transform: rotateY(-180deg);  
  105.                     transform: rotateY(-180deg);                          
  106.         }  
  107.           
  108.         .thumb.flip img,  
  109.         .thumb.flip .thumb-detail {  
  110.             -webkit-backface-visibility: hidden;  
  111.                -moz-backface-visibility: hidden;  
  112.                 -ms-backface-visibility: hidden;  
  113.                  -o-backface-visibility: hidden;  
  114.                     backface-visibility: hidden;  
  115.         }  
  116.           
  117.         .thumb.flip .flipIt {  
  118.             -webkit-transform: rotateY(-180deg);  
  119.                -moz-transform: rotateY(-180deg);              
  120.                 -ms-transform: rotateY(-180deg);              
  121.                  -o-transform: rotateY(-180deg);              
  122.                     transform: rotateY(-180deg);              
  123.         }  
  124.       
  125.     </style>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.     $(function () {  
  3.       
  4.   
  5.         if ($('html').hasClass('csstransforms3d')) {      
  6.           
  7.             $('.thumb').removeClass('scroll').addClass('flip');       
  8.             $('.thumb.flip').hover(  
  9.                 function () {  
  10.                     $(this).find('.thumb-wrapper').addClass('flipIt');  
  11.                 },  
  12.                 function () {  
  13.                     $(this).find('.thumb-wrapper').removeClass('flipIt');             
  14.                 }  
  15.             );  
  16.               
  17.         } else {  
  18.   
  19.             $('.thumb').hover(  
  20.                 function () {  
  21.                     $(this).find('.thumb-detail').stop().animate({bottom:0}, 500, 'easeOutCubic');  
  22.                 },  
  23.                 function () {  
  24.                     $(this).find('.thumb-detail').stop().animate({bottom: ($(this).height() * -1) }, 500, 'easeOutCubic');            
  25.                 }  
  26.             );  
  27.   
  28.         }  
  29.       
  30.     });  
  31.     </script>  

 

XML/HTML Code
  1. <div id="container">  
  2.     <div class="thumb scroll">  
  3.         <div class="thumb-wrapper">  
  4.             <img src="images/1.jpeg" alt="" />  
  5.             <div class="thumb-detail">  
  6.                 <a href="">  
  7.                     文字1  
  8.                 </a>                  
  9.             </div>  
  10.         </div>  
  11.     </div>        
  12.       
  13.     <div class="thumb scroll">  
  14.         <div class="thumb-wrapper">  
  15.             <img src="images/2.jpeg" alt="" />  
  16.             <div class="thumb-detail">  
  17.                 <a href="">  
  18.                     文字2  
  19.                 </a>  
  20.             </div>  
  21.         </div>  
  22.     </div>  
  23.       
  24.     <div class="thumb scroll">  
  25.         <div class="thumb-wrapper">  
  26.             <img src="images/3.jpeg" alt="" />  
  27.             <div class="thumb-detail">  
  28.                 <a href="">  
  29.                     文字3  
  30.                 </a>                  
  31.             </div>  
  32.         </div>  
  33.     </div>  
  34. </div>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_93.html