本文介绍如何利用 perspective 和 rotatex（或 rotatey）组合实现类似“上窄下宽”的视觉畸变效果，使卡片呈现自然的三维倾斜感，适用于卡片、图片容器等 ui 元素的立体化设计。
本文介绍如何利用 perspective 和 rotatex（或 rotatey）组合实现类似“上窄下宽”的视觉畸变效果，使卡片呈现自然的三维倾斜感，适用于卡片、图片容器等 ui 元素的立体化设计。
要让一个卡片（如 <img> 或 <div>）产生「顶部收缩、底部拉伸」的透视扭曲效果——即模拟从略高视角斜向下观察时的形变（A/B 靠近、C/D 分离、整体纵向压缩），单纯使用 skew() 或 scale() 无法达成真实感；必须启用 3D 渲染上下文并结合透视投影。
核心原理是：
✅ 启用 transform-style: preserve-3d（确保子元素保留 3D 空间位置）；
✅ 设置 perspective（定义观察者到 z=0 平面的距离，值越小，透视越强烈）；
✅ 使用 rotateX(45deg) 绕 X 轴旋转，使元素顶部向内、底部向外“翻转”，从而自然形成上窄下宽的梯形畸变；
⚠️ 注意：perspective 应作用于父容器（.parent），而非 .card 本身，否则会导致子元素透视失效或渲染异常。
以下是完整可运行示例：
.parent {
display: flex;
justify-content: center;
align-items: center;
padding: 5rem;
/* 关键：为子元素提供透视环境 */
perspective: 500px;
}
.card {
transform-style: preserve-3d;
background: #ff6b6b;
height: 250px;
width: 190px;
/* 绕 X 轴向上倾斜，产生“俯视压缩”效果 */
transform: rotateX(30deg);
/* 可选：微调 Z 轴位置避免裁剪 */
transform: rotateX(30deg) translateZ(-20px);
}<div class="parent">
<div class="card">
<img src="https://picsum.photos/190/250" alt="distorted card"
style="width:100%; height:100%; object-fit:cover;">
</div>
</div>? 关键注意事项：
- perspective 值建议在 300px–800px 区间调试：过小（如 100px）畸变剧烈易失真；过大则效果不明显；
- rotateX() 角度推荐 20–40deg：角度越大，顶部压缩越强，但需配合 translateZ() 避免背面被裁剪；
- 若需“左窄右宽”效果（即 A/C 靠近、B/D 分离），请改用 rotateY()；
- 图片需包裹在 .card 内并设置 object-fit: cover，确保变形后内容填充完整；
- 不要遗漏 transform-style: preserve-3d —— 它是维持 3D 层级关系的必要声明。
最终效果将精准复现目标图中那种具有空间纵深感的倾斜卡片：顶部两点（A/B）视觉距离缩短，底部两点（C/D）横向延展，整体高度因透视产生自然压缩，完全符合人眼对斜角视角的感知逻辑。
立即学习“前端免费学习笔记（深入）”；
