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

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

在线预览    源码下载

使用方法

HTML结构

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

XML/HTML Code复制内容到剪贴板

<div class=’container’>  
  <ul>  
    <li>  
      <a class=’normal’ href=’#’>  
        <svg viewBox=’0 0 80 76′ x=’0px’ y=’0px’>  
          <g>  
            <path d=’M 68.9708 24.8623 L 60.4554 2.3018 …… 68.0625 Z’></path>  
          </g>  
        </svg>  
      </a>  
      <div class=’info’>  
        <h3>…</h3>  
        <p>….</p>  
      </div>  
    </li>  
    ……   
  </ul>  
</div>      
  

CSS样式

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

CSS Code复制内容到剪贴板

ul {   
  padding: 0;   
  margin: 0 0 50px;   
}   
ul:after {   
  content: "";   
  display: table;   
  clear: both;   
}   
    
li {   
  position: relative;   
  float: left;