CSS3制作炫酷带方向感应的鼠标滑过图片3D动画

这是一款使用CSS3和一点JS来制作的炫酷带方向感应的鼠标滑过图片3D动画特效。在特效中，当用户的鼠标滑过网格中的图片时，网格中的内容遮罩层会出现3D翻转动画，并且带有方向感应，能够从鼠标进入的方向开始翻转，效果非常的酷。

在线预览    源码下载

使用方法

HTML结构

该方向感应鼠标滑过动画的HTML结构采用无序列表的HTML结构来制作网格布局，每一个<li>元素是一个网格。每个网格中使用一个<svg>元素来进行占位，实际上它是一个图片的小图标。另外div.info是要进行3D翻转的遮罩层。

1. <div class='container'>  
2.   <ul>  
3.     <li>  
4.       <a class='normal' href='#'>  
5.         <svg viewBox='0 0 80 76' x='0px' y='0px'>  
6.           <g>  
7.             <path d='M 68.9708 24.8623 L 60.4554 2.3018 ...... 68.0625 Z'></path>  
8.           </g>  
9.         </svg>  
10.       </a>  
11.       <div class='info'>  
12.         <h3>...</h3>  
13.         <p>....</p>  
14.       </div>  
15.     </li>  
16.     ......   
17.   </ul>  
18. </div>      
19.   

CSS样式

整个网格布局使用无序列表来制作，所有的li元素都采用左浮动。

1. ul {   
2.   padding: 0;   
3.   margin: 0 0 50px;   
4. }   
5. ul:after {   
6.   content: "";   
7.   display: table;   
8.   clear: both;   
9. }   
10.     
11. li {   
12.   position: relative;   
13.   float: left;   
14.   width: 200px;   
15.   height: 200px;   
16.   margin: 5px;