我喜欢这个解决方案，不仅因为它有效（而且效果非常好），还因为它教会了我一个谦卑的教训。

我曾一度认为 perspective-origin 是个“坏”属性。我对它抱有抵触情绪，因为我只把它看作是造成图像失真的根源。我一心只想找到制作 3D 的“正确”方法，却忽略了真正能解决问题的工具。

Cubiq 并没有这种偏见。他看到的是一个数学问题：“我需要当旋转方向为 Y 时，投影看起来要像 X。”然后他找到了控制投影的属性。

AI 摘要：本文由 Amit Sheen 撰写，讲述他如何在纯 CSS 的限制下实现具有真实 3D 深度和裁剪效果的“Deep Card”。传统做法会因 overflow: clip 扁平化 3D 空间而失败。作者在尝试数年未果后，受到 Cubiq 的启发，用 perspective-origin 动态校正视角，实现了既可保持 3D 空间又可裁剪内容的完美效果。这一方案不仅重燃了纯 CSS 的创造力，也提醒开发者，不要过早排斥某些特性，真正的创新往往在规则之外。

1. 卡片与“深度卡片”的概念
• 普通卡片是二维的，最多用阴影暗示层次；“Deep Card”试图在卡片内构建真实的体积。
• 技术目标：让元素在旋转时表现出真实景深与透视变化。

2. CSS 陷阱与规范限制
• 核心难题是 overflow: clip 与 transform-style: preserve-3d 无法共存。
• 依据 CSS Transforms Module Level 2 规范：含有分组属性的元素（如 overflow、opacity、filter）会被“扁平化”，导致 3D 效果丢失。

3. 伪 3D 的尝试（Faking It）
• 通过 scale() 与 translate() 等方式模拟透视变化。
• 优点：高性能、跨浏览器兼容；缺点：角度一大透视破碎，难以保持自然立体感。

4. 数学解法的探索之路
• 尝试为每层使用 clip-path 来动态裁剪，但计算复杂度极高，需要实时三角与投影运算。
• 作者几乎放弃时，收到开发者 Cubiq 的信息，成为突破契机。

5. 关键突破：perspective-origin 的反向运用
• 以往被认为“畸变丑陋”的属性被重新发掘。
• Cubiq 的公式通过基于旋转角度动态计算 perspective 与 perspective-origin，实现投影映射式的深度对齐。
• 结果：在被扁平化的上下文中实现了视觉上的真实 3D 效果。

6. 实现细节与代码结构
• HTML 结构：.card-container > .card > .card-content + .card-back。
• JS 监听鼠标位置，计算 --mouse-x、--mouse-y。
• CSS 关键：
• 外层提供全局 perspective。
• 内层通过 calc(cos/sin) 动态校正视角。
• overflow: clip 限定边界，translateZ() 生成深度分层。
• 注意 .card-layers 容器避免直接扁平化问题。

7. 深化与扩展效果
• 利用亮度变化、半透明叠加强化视觉深度。
• 控制 z-index 实现不同的层次呈现。
• 可添加交互，如点击翻转 180°（前后双面内容）。
• 内层动画（如视差滚动与文字 3D 动效）进一步扩展场景。

8. 启示与总结
• 结论：纯 CSS 也能实现真实的 3D 深度与裁剪效果。
• 哲思：别轻易排除技术手段，创新常源自对“禁区”的重新理解。
• 鼓励读者“go build something deep”——继续挑战 CSS 的极限。

Frontend Masters

The Deep Card Conundrum

In the world of web design, we often talk about “cards”. Those neat little rectangles that group information together are the bread and butter of modern UI. But usually, these cards are as flat as the screens they live on. Maybe they have a subtle drop shadow…