基础倾斜卡片需用transform: rotatex()/rotatey()实现3d变换，必须在父容器设perspective、子元素设transform-style: preserve-3d；角度需根据鼠标偏移动态计算，x偏移驱动rotatey（左右倾），y偏移驱动rotatex（前后倾）；移动端需监听touchmove并preventdefault；注意overflow: hidden防溢出。
用 transform: rotateX() 和 rotateY() 实现基础倾斜
卡片倾斜本质是 3D 变换，不是单纯加个 skew。浏览器默认关闭 3D 渲染上下文，必须显式开启：transform-style: preserve-3d（父容器） + perspective（决定“镜头距离”，值越小倾斜越夸张，一般设 1000px 到 2000px）。直接写 rotateX(10deg) rotateY(-5deg) 不会动——缺了 transform-style，子元素会被压平成 2D。
常见错误：只给卡片本身加 perspective，但 perspective 必须作用在父容器上，卡片只是被变换的子元素。正确结构：
<div class="card-container" style="perspective: 1500px;">
<div class="card" style="transform-style: preserve-3d;">
<!-- 内容 -->
</div>
</div>
监听鼠标位置并动态计算旋转角度
倾斜角度不能写死，得根据鼠标相对卡片中心的偏移量实时算。核心逻辑是：鼠标离中心越远，rotateX 和 rotateY 的绝对值越大；X 偏移影响 Y 轴旋转（绕水平轴转，看起来上下倾），Y 偏移影响 X 轴旋转（绕垂直轴转，看起来左右倾）。
关键点：
- 用
getBoundingClientRect()拿卡片坐标，减去鼠标clientX/Y得到相对偏移 - 把偏移归一化到 [-1, 1] 区间（除以半宽/半高），再乘以你想要的最大旋转度数（比如 ±12deg）
- 注意：CSS 的
rotateX是绕 X 轴转，对应视觉上的“前后倾”（Y 偏移驱动）；rotateY是绕 Y 轴转，对应“左右倾”（X 偏移驱动）——别反了 - 用
requestAnimationFrame更新，避免mousemove频繁触发卡顿
用 vanilla-tilt.js 还是手写？
如果项目不追求极致轻量，vanilla-tilt.js 确实省事：引入后加 data-tilt 属性就行，支持 maxTilt、speed、scale 等配置。但它默认会给每个卡片加一层 wrapper 元素，可能破坏原有 DOM 结构；而且对 SVG 子元素或 position: fixed 内容兼容性差。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
手写更可控，尤其适合已有的卡片组件封装。最小可用逻辑就 20 行 JS：监听 mouseenter/mousemove/mouseleave，维护一个 rafId 防止重复调用，mouseleave 时重置 transform 到 none 或 rotateX(0) rotateY(0)，否则卡片会卡在最后角度。
移动端适配和性能陷阱
手机没鼠标，mousemove 不触发。想兼容触摸，得监听 touchmove 并取 touches[0] 的坐标，但要注意 touchmove 默认可滚动，需加 { passive: false } 并在回调里 preventDefault()（否则手势失效）。不过真实场景中，移动端用户更习惯滑动而非“悬停倾斜”，多数产品直接禁用移动端 tilt 效果。
性能方面，频繁改 transform 本身不触发重排，但若卡片内有大量文字或图片，且用了 will-change: transform 过度提示，反而增加内存开销。建议只在 hover/active 状态下启用 tilt，空闲时保持静态。
最易被忽略的一点：所有倾斜动画都依赖父容器的 overflow: hidden。否则旋转时卡片边缘会溢出，尤其是大角度或卡片带阴影时，视觉上像“破框”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
