3D 倾斜卡片

卡片随鼠标方向微微倾斜，像拿在手里的一张实体卡

全平台通用动效与背景内容区效果

实时预览（拖动参数，立刻看变化）

最大倾斜角 10deg 悬停放大 1.03 高光 on

代码

<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>);
}

代码片段以 MIT 释出，可自由复制改用。

这个效果是怎么实现的

它是怎么工作的（中文）

把鼠标在卡片内的相对位置换算成 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 原创，未复制上述项目的代码或文案，也与妞妞老师原始素材无关。

配套提示词

3D 倾斜卡片 · 提示词待复验 · →