perspective - 透视

什么是透视？

透视（perspective）定义了观察者与 3D 元素之间的距离。它让元素产生近大远小的视觉效果，是实现真实 3D 效果的关键。

• 值越小：透视效果越强烈（观察者离得越近）
• 值越大：透视效果越平缓（观察者离得越远）
• 常用值：500px - 1500px
• 应用位置：设置在父元素上

示例 1：无透视 vs 有透视

对比没有透视和有透视的 rotateY 效果

/* 无透视 - 看起来像 2D 缩放 */
.no-perspective .box {
  transform: rotateY(60deg);
}

/* 有透视 - 真正的 3D 效果 */
.with-perspective {
  perspective: 800px;
}

.with-perspective .box {
  transform: rotateY(60deg);
}

示例 2：不同透视距离

观察不同 perspective 值的效果差异

.near { perspective: 300px; }
.medium { perspective: 800px; }
.far { perspective: 1500px; }

示例 3：3D 卡片翻转

透视的经典应用 - 卡片翻转效果

点击卡片翻转

.container {
  perspective: 800px;
}

.card {
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

.card.flipped {
  transform: rotateY(180deg);
}

常见应用场景