Anime.js 3D卡片翻转：手把手3步实现滚动堆叠效果

Anime.js 3D卡片翻转手把手3步实现滚动堆叠效果【免费下载链接】animeJavaScript animation engine项目地址: https://gitcode.com/GitHub_Trending/an/anime给SaaS产品团队页做卡片时一排平铺的头像显得寡淡。这篇用Anime.js把一次滚动变成3D卡片翻转18张卡片从屏幕下方逐层升起、微微倾斜最后堆叠成扇形。可抄的代码都在examples/onscroll-responsive-scope/目录里。翻转为什么有厚度CSS 3D与滚动进度的分工这个效果不靠逐帧手搓。CSS只负责看起来立体给容器声明一个透视距离perspective决定3D有多夸张让卡片每一层保持 preserve-3d子元素留在同一个3D空间里正面、背面、卡片本体才活在同一个三维空间。Anime.js只负责动多少内置的 onScroll滚动进度驱动器把你滚了多远换算成 0–100% 的进度再把这个进度映射到每张卡片的旋转角和位移上。两者像门框和门门框是CSS钉死的门开到几度由你的滚动来拉。这个映射是双向的——滚动回退时卡片逐层归位手一停它们就停在当前角度效果因此显得真。进度换算逻辑在src/events/scroll.js想深挖可以去看。搭骨架、给姿态、接驱动三步复现扇形堆叠把examples/onscroll-responsive-scope/的 index.html 和 index.js 拷进项目整个效果正好拆成三个互不干扰的子问题每一步都能独立看懂。两层div叠出双面卡片8行HTML搞定这一步解决双面卡片从哪来每张 .card 里绝对定位 front、back 两个 div 叠在一起正反面的图是同目录的 card.svg 和 card-back.svgSVG任意分辨率都不糊。示例堆了18张卡数量越多扇形越密。div classstack div classcard div classfront/div div classback/div /div !-- 再重复17个 .card见同目录 index.html -- /div.stack 容器用 vh 单位锁定宽高窗口怎么缩放扇形比例都不塌。配好3D透视的三行CSS顺便藏住背面这一步解决正反面为什么不互相透。关键两笔backface-visibility: hidden卡片转过90°时把这一面藏掉背面再预先 rotateY(180deg) 转半圈。注意 transform-origin翻转轴位置被压到卡片底边之外y105%卡片才会像从桌面上站起来而不是原地晃。.sticky-content { perspective: 1000px; /* 透视距离越小越夸张 */ transform-style: preserve-3d; } .card { transform-style: preserve-3d; transform-origin: 50% 105% 0; /* 翻转轴压到卡片下方 */ } .front, .back { backface-visibility: hidden; } .back { transform: rotateY(180deg); }接上onScroll让滚动驱动旋转和位移这一步解决卡片怎么从静止里拉起来先用 animate 写死动什么、动多少再用 onScroll(...).link() 把播放权交给滚动。rotate 里的 stagger批量生成一串递增取值的工具让外侧两张卡倾斜最大、内侧最小扇形自然摊开。import { animate, onScroll, stagger } from ../../dist/modules/index.js; const cardsAnimation animate(.card, { transformOrigin: 50% 150%, y: { from: stagger([-40vh, 40vh], { from: center }) }, rotate: { to: stagger([-30, 30]), delay: stagger([0, 950], { from: last, start: 200 }), }, duration: 750, }); onScroll({ target: .sticky-container, enter: top, leave: bottom, sync: .1 }) .link(cardsAnimation);sync: .1 让动画进度比滚动慢半拍滚轮一松卡片还会多走一点再落定动作就有分量了。参数拖多少手感才出来4个值和3个坑 先照抄结构、再逐个改值边滚边看手感是调出来的参数视觉影响推荐起步值perspective3D厚度太小卡片会变形失真1000pxtransform-origin翻转轴位置y 设太低像钟摆左右晃50% 105%rotate 的 stagger 区间单张卡最大倾角太大像要倒±30°delay 的 stagger 步长卡片到场的连续感太大扇形拼不齐50–950mssync滚动与动画的橡皮筋感越大越滞后0.1⚠️ 三个新手必踩的坑backface-visibility: hidden 只写在 .front 上 → 卡片转到90°时正反面同时透出来翻转变透明牌。.stack / .card / .card div 链条上任何一层漏了 preserve-3d → 3D被拍扁perspective 完全失效这是最常见的。transform-origin 留在默认 50% 50% → 翻转轴在中心卡片只会原地晃荡没有从屏幕下升起的纵深感。不止卡片翻转同仓库还有两个目录值得看examples/onscroll-sticky/同一套粘性滚动技巧、不同动效模式如果你的页面只要吸顶 视差这个版本更省。examples/draggable-playground/想把卡片从滚动驱动改成鼠标拖拽驱动这里的 draggable鼠标拖拽交互用法可以直接搬。完整实现都在examples/onscroll-responsive-scope/改 rotate 的区间和 delay 的步长两个值就能把它搬进你的项目。【免费下载链接】animeJavaScript animation engine项目地址: https://gitcode.com/GitHub_Trending/an/anime创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考