perspective-origin - 透视原点

控制 3D 透视的视角位置

语法说明

perspective-origin: x-position y-position;
  • perspective-origin 属性定义了观察者（视角）在 3D 空间中的位置
  • 它决定了从哪个角度观察 3D 变换的元素
  • 重要：必须配合 perspective 属性使用，单独使用无效

示例：不同视角位置的效果

悬停卡片查看旋转效果，注意不同视角下的透视差异

center center (默认)
3D 卡片
left top
3D 卡片
right top
3D 卡片
left bottom
3D 卡片
right bottom
3D 卡片
80% 30% (自定义)
3D 卡片
/* 基础语法 */
.container {
  perspective: 600px;
  perspective-origin: center center; /* 默认值 */
}

/* 关键字值 */
perspective-origin: left top;      /* 左上角 */
perspective-origin: right bottom;  /* 右下角 */
perspective-origin: center center; /* 中心（默认）*/

/* 百分比值 */
perspective-origin: 50% 50%;  /* 等同于 center center */
perspective-origin: 0% 0%;    /* 等同于 left top */
perspective-origin: 80% 30%;  /* 自定义位置 */

/* 像素值 */
perspective-origin: 100px 50px;

/* 单值（水平位置，垂直默认 50%）*/
perspective-origin: left;  /* 等同于 left center */
perspective-origin: 75%;   /* 等同于 75% 50% */

💡 重要说明：

  • 必须配合 perspective 使用：单独设置 perspective-origin 无效
  • 默认值：center center (50% 50%)
  • 坐标系统：第一个值为水平位置（left / center / right / 百分比 / 像素），第二个值为垂直位置（top / center / bottom / 百分比 / 像素）
  • 应用场景：创建更真实的 3D 效果，模拟不同角度的观察

⚠️ 与 transform-origin 的区别：

  • perspective-origin：设置在父容器上，控制观察者的位置
  • transform-origin：设置在变换元素上，控制变换的原点
  • 两者经常一起使用，但作用完全不同

实际应用示例

/* 3D 卡片翻转 - 从右上角观察 */
.card-container {
  perspective: 1000px;
  perspective-origin: right top;
}

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

.card-container:hover .card {
  transform: rotateY(180deg);
}