hover3d.js

是一款效果超酷的鼠标滑过图片3D卡片效果jQuery插件。通过该插件可以制作出鼠标滑过图片时，图片3D倾斜，旋转的效果，非常有层次感。
使用该jQuery插件需要在页面中引入jquery和jquery.hover3d.min.js文件

<script src="src/jquery.min.js"></script>
<script src="src/jquery.hover3d.min.js"></script>      

HTML结构

该鼠标滑过图片效果的HTML结构如下：包裹元素和它里面的子元素将被之后为3D卡片效果。

<div class="project">     <div class="project__card">         <!-- Content element goes here -->     </div> </div>

 CSS样式

该特效不需要特别的CSS样式，你可以指定自己的CSS样式。但是你可以为鼠标滑入和滑出图片时添加下面的辅助class类。

/* This class can be replaced using options */ .hover-in{     transition: .3s ease-out; } .hover-out{     transition: .3s ease-in; }

 初始化插件

在页面加载完毕之后，可以通过下面的方法来初始化该插件。

$(".project").hover3d({     selector: ".project__card" });

 配置参数

参数	类型	默认值	描述
selector	string	null	3D卡片的选择器元素
perspective	integer	1000	3D透视的深度
sensitivity	integer	20	鼠标移动的灵敏度，数值越大越不灵敏
invert	boolean	false	默认行为是元素会跟随鼠标，就像元素一直面向鼠标
hoverInClass	string	hover-in	鼠标滑入时的辅助class类，会在300毫秒后移除
hoverOutClass	string	hover-out	鼠标滑出时的辅助class类，会在300毫秒后移除
hoverClass	string	hover-3d	鼠标滑过图片时的辅助类

hover3d.js插件的github地址为：https://github.com/ariona/hover3d