首页>>Jquery图片>>CSS3鼠标经过图片3D翻转动画,支持移动端(2018-08-26)

CSS3鼠标经过图片3D翻转动画,支持移动端

CSS3鼠标经过图片3D翻转动画,支持移动端
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="demo">  
  2.     <div class="container">  
  3.         <div class="row">  
  4.             <div class="col-md-4 col-sm-6">  
  5.                 <div class="box">  
  6.                     <div class="box-img">  
  7.                         <img src="images/1.jpg" alt="">  
  8.                     </div>  
  9.                     <div class="box-content">  
  10.                         <h4 class="title">Duende</h4>  
  11.                         <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.</p>  
  12.                         <ul class="social-links">  
  13.                             <li><a href="#" class="fa fa-qq"></a></li>  
  14.                             <li><a href="#" class="fa fa-weibo"></a></li>  
  15.                             <li><a href="#" class="fa fa-weixin"></a></li>  
  16.                         </ul>  
  17.                     </div>  
  18.                 </div>  
  19.           </div>  
  20.   
  21.             <div class="col-md-4 col-sm-6">  
  22.                 <div class="box">  
  23.                     <div class="box-img">  
  24.                         <img src="images/2.jpg" alt="">  
  25.                     </div>  
  26.                     <div class="box-content">  
  27.                         <h4 class="title">Schadenfreude</h4>  
  28.                         <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.</p>  
  29.                         <ul class="social-links">  
  30.                             <li><a href="#" class="fa fa-qq"></a></li>  
  31.                             <li><a href="#" class="fa fa-weibo"></a></li>  
  32.                             <li><a href="#" class="fa fa-weixin"></a></li>  
  33.                         </ul>  
  34.                     </div>  
  35.                 </div>  
  36.           </div>  
  37.   
  38.             <div class="col-md-4 col-sm-6">  
  39.                 <div class="box">  
  40.                     <div class="box-img">  
  41.                         <img src="images/3.jpg" alt="">  
  42.                     </div>  
  43.                     <div class="box-content">  
  44.                         <h4 class="title">Cafune</h4>  
  45.                         <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.</p>  
  46.                         <ul class="social-links">  
  47.                             <li><a href="#" class="fa fa-qq"></a></li>  
  48.                             <li><a href="#" class="fa fa-weibo"></a></li>  
  49.                             <li><a href="#" class="fa fa-weixin"></a></li>  
  50.                         </ul>  
  51.                     </div>  
  52.                 </div>  
  53.             </div>  
  54.         </div>  
  55.     </div>  
  56. </div>  

 


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