前言
在前端开发中，我们经常会遇到需要制作一些卡片式翻转效果的场景，比如商品介绍卡片、个人名片等等。这时，我们不妨使用一个 npm 包 @haztivity/hz-cardflip 来实现这些效果。
安装
在使用 @haztivity/hz-cardflip 之前，需要先安装该包。使用以下命令：
npm install @haztivity/hz-cardflip
使用
安装完成后，我们就可以开始使用了。首先，在 HTML 文件中引入 @haztivity/hz-cardflip 的 CSS 文件和 JS 文件：
<link rel="stylesheet" href="~@haztivity/hz-cardflip/dist/hz-cardflip.min.css"> <script src="~@haztivity/hz-cardflip/dist/hz-cardflip.min.js"></script>
然后，在需要翻转的卡片容器上加上hzc-flip-container类名，再在容器内加上两个子容器，分别为正面和背面，分别加上 hzc-flip-front 和 hzc-flip-back 类名。最后，在 JS 文件中使用以下代码启用：
var flipCard = new HzCardflip(".hzc-flip-container", { flipOnHover: true, flipDuration: 0.6, });
可选参数flipOnHover表示鼠标悬停时是否自动翻转，默认为 false；flipDuration表示翻转时长，默认为 0.5 秒。
示例代码
HTML：
<div class="hzc-flip-container"> <div class="hzc-flip-front"> <img src="front.jpg" alt="front"> </div> <div class="hzc-flip-back"> <img src="back.jpg" alt="back"> </div> </div>
CSS：
-- -------------------- ---- ------- -------------------- --------- --------- -------- ------------- ------ ------ ------- ------ ------------ ------- - ---------------- --------------- --------- --------- ---- -- ----- -- ------ ----- ------- ----- -------------------- ------- - --------------- ---------- ---------------- -展开代码
JS：
var flipCard = new HzCardflip(".hzc-flip-container", { flipOnHover: true, flipDuration: 0.6, });
结语
@haztivity/hz-cardflip 是一个强大而简单的 npm 包，可以方便地实现卡片式翻转效果，使网站更加生动有趣。希望本文对大家学习和使用这个包有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/116779
