3D Tilt Card
The card tilts toward the cursor, like a physical card in your hand
Live preview (drag the parameters, watch it change)
Code
<div class="tilt-scene"><div class="tilt-card" id="tiltCard">…</div></div>
<script>
const card = document.getElementById('tiltCard'); const max = 10;
card.addEventListener('pointermove', e => {
const r = card.getBoundingClientRect();
const x = (e.clientX - r.left) / r.width - .5, y = (e.clientY - r.top) / r.height - .5;
card.style.transform = `rotateY(${x * 2 * max}deg) rotateX(${-y * 2 * max}deg) scale(1.03)`;
});
card.addEventListener('pointerleave', () => card.style.transform = 'rotate(0) scale(1)');
</script>
<style>
.tilt-scene { perspective: 900px; }
.tilt-card { transition: transform .25s ease-out; transform-style: preserve-3d; }
</style><!-- 外层加 [perspective:900px]，卡片 transform 仍由 JS 写 style（与 html-css 档同一段脚本） -->
<div class="[perspective:900px]"><div id="tiltCard" class="transition-transform duration-200 ease-out [transform-style:preserve-3d]">…</div></div>export function TiltCard({ children }) {
const ref = React.useRef(null); const max = 10;
const onMove = (e) => {
const r = ref.current.getBoundingClientRect();
const x = (e.clientX - r.left) / r.width - .5, y = (e.clientY - r.top) / r.height - .5;
ref.current.style.transform = `rotateY(${x * 2 * max}deg) rotateX(${-y * 2 * max}deg) scale(1.03)`;
};
return (<div style={{ perspective: 900 }}><div ref={ref} onPointerMove={onMove}
onPointerLeave={() => ref.current.style.transform = "rotate(0) scale(1)"}
style={{ transition: "transform .25s ease-out", transformStyle: "preserve-3d" }}>{children}</div></div>);
}Code snippets are MIT-licensed — copy and adapt freely.
How this effect works
它是怎么工作的（中文）
把鼠标在卡片内的相对位置换算成 rotateX / rotateY 角度（一般不超过 10 度），父级给 perspective 才有纵深。离开时把角度归零并让 CSS 过渡慢慢回正。倾斜角度一大就廉价且晕——克制是这个效果的全部手艺。
How it works (English)
Convert the cursor's relative position inside the card into rotateX / rotateY angles (keep them under ~10 degrees); the parent needs perspective for depth. On leave, reset the angles and let a CSS transition ease it back. Big angles look cheap and cause motion sickness — restraint is the whole craft here.
参考与来源 Sources
本条为「批次 1（重建）」成果（2026-11-10 用户决定：原 妞妞老师 素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与 妞妞老师 原始素材无关。