真实翘起感需设容器perspective: 800px、卡片transform-style: preserve-3d，hover时用transform: rotateX(-12deg) translateZ(5px)并设transform-origin: 50% 100%，叠加scaleY(0.3) blur(8px)伪元素投影，注意Safari前缀与深色模式适配。
用 transform: rotateX + box-shadow 实现真实翘起感
纯 CSS 做卡片“翘起”不是加个 transform: rotateX(10deg) 就完事——视角不对会像翻书，阴影不匹配会像飘在空中。关键得模拟「卡片底部固定、顶部抬起」的物理逻辑，配合透视（perspective）和分层阴影。
实操建议：
- 容器（如
.card-container）必须设perspective: 800px，值太小会畸变，太大翘起感弱 - 卡片本身加
transform-style: preserve-3d，否则子元素旋转会扁平化 - hover 时只对卡片用
transform: rotateX(-12deg) translateZ(5px)：负角度是“向上翘”，translateZ抬高顶部让阴影自然偏移 - 阴影不能只靠
box-shadow，要叠加一层伪元素::after模拟地面投影，用transform: scaleY(0.3) blur(8px)控制压扁+柔边
阴影错位？检查 transform-origin 和坐标系
常见错误是翘起后阴影还停在原地，或者只翘左边/右边——根本原因是没设准旋转基点。默认 transform-origin: 50% 50% 是绕中心转，但翘起必须绕底部中点（50% 100%）。
容易踩的坑：
- 如果卡片有
margin或父容器overflow: hidden，rotateX后顶部可能被裁切，改用padding预留空间 -
transform-origin必须写在 hover 触发的规则里，而不是初始状态——否则未 hover 时卡片就已偏移 - 阴影颜色别用纯黑：
box-shadow: 0 12px 24px rgba(0,0,0,0.15)更透气；伪元素投影用rgba(0,0,0,0.08)避免抢主视觉
移动端失效？perspective 在 Safari 上要加 -webkit-
iOS Safari 对 perspective 支持不一致，尤其嵌套 flex 容器时容易失效。不加前缀时，rotateX 可能退化成平面倾斜，看着像歪了而不是翘。
兼容性处理：
- 容器上同时写
perspective: 800px和-webkit-perspective: 800px - 卡片 hover 的 transform 加双前缀：
-webkit-transform: rotateX(-12deg) translateZ(5px) - 真机测试时关掉「减少动画」系统设置，否则 Safari 会强制禁用 3D transform
- 如果仍卡顿，把
will-change: transform加到卡片上（仅 hover 时），但别滥用，否则内存泄漏
和 backdrop-filter 冲突？z-index 不是万能解
给卡片加毛玻璃（backdrop-filter: blur(10px)）时，常发现翘起后背景虚化区域错位，甚至整个卡片消失。这不是 z-index 能解决的——backdrop-filter 会创建新的 stacking context，和 3D transform 的渲染层打架。
绕过方案：
- 把
backdrop-filter移到卡片的父容器（.card-container），卡片自身只负责 transform - 若必须卡片本体加虚化，去掉
transform-style: preserve-3d，改用transform: perspective(800px) rotateX(-12deg)单行写法（牺牲部分精度换兼容） - 阴影伪元素
::after的z-index必须设为 -1，且父容器不能有overflow: hidden，否则投影被裁
最易被忽略的是：翘起效果在深色模式下阴影对比度会骤降，记得用 @media (prefers-color-scheme: dark) 单独调暗投影颜色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
