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)
  • 版权声明:本文内容由互联网用户自发贡献,本站不拥有所有权,不承担相关法律责任。如果发现本站有涉嫌抄袭的内容, 欢迎发送邮件至 postmaster@zzyzan.com 举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。
  • 本作品是由 小乖乖资源共享网 会员 时间的灰烬 的投递作品。
  • 欢迎转载,但请务必注明来源地址:http://www.zzyzan.com/web/pic/8014.html

- 评论

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