首页>>Jquery文字>>jQuery/CSS3实现Android Dock效果 翻转菜单3d显示(2014-08-25)

jQuery/CSS3实现Android Dock效果 翻转菜单3d显示

 注意翻转的时候图标出现的效果是3D的，注意看两端就明白了

jQuery/CSS3实现Android Dock效果 翻转菜单3d显示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="container">  
  2.      
  3.   
  4.   
  5.   
  6.   
  7.    <span id="information" style="display:none">Your browser doesn't support CSS3 3D Transform</span>  
  8.    
  9.  </div>    
  10.  <div id="dock-wrapper">  
  11.    <div class="dock">  
  12.      <div class="dock-front">  
  13.         <img src="images/arrow-up.png" alt="Arrow Up" id="arrow-up" />  
  14.      </div>  
  15.      <div class="dock-top">  
  16.         <img src="images/arrow-down.png" alt="Arrow Down" id="arrow-down" />  
  17.      </div>  
  18.    </div>  
  19.    <div class="item">  
  20.     <img src="images/launcher-pro.png" width="60" />  
  21.     <img src="images/2do.png" width="60" />  
  22.     <img src="images/antivirus.png" width="60" />  
  23.     <img src="images/drive.png" width="60" />  
  24.     <img src="images/plex.png" width="60" />  
  25.     <img src="images/maps.png" width="60" />  
  26.    </div>  
  27.  </div>  
  28.   
  29.  <img src="images/arrow.png" alt="arrow" id="arrow" />  

 


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