jQuery图片鼠标悬停3D效果插件

jQuery图片鼠标悬停3D效果插件

描述

jQuery图片鼠标悬停3D效果插件是使用三维空间的CSS3变换,检测鼠标的移动来改变变换值。

使用

在HTML代码中引入jQuery库和jquery.hover3d.min.js

HTML

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

这个元素是必须的,这个容器和里面的元素将会变成3D卡片

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

CSS

无需引入特别的CSS文件,你可以写自己的CSS。

.hover-in{
    transition: .3s ease-out;
}
.hover-out{
    transition: .3s ease-in;
}

JS

初始化插件

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

兼容性

支持所有浏览器

打赏
下载 在线预览 积分 (-2) 吐槽 (0)
×
加载中,请稍候…

您需要 登录 后才能发表评论。

avatar

- 评论

  • 加载中,请稍候…
我要吐槽