图片/图形
hover3d 鼠标滑过图片3D卡片jQuery插件
PetitQ
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 | 鼠标滑过图片时的辅助类 |
Github 地址：https://github.com/ariona/hover3d
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
