hover3d.js-超酷鼠标滑过图片3D卡片效果jQuery插件

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"
});               
                

配置参数

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