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