在CSS三维变换中，perspective属性决定了观察者距离z=0平面的远近，从而影响元素在屏幕上的透视收缩程度。很多布局错误其实都源于没搞清楚它到底应该挂在谁身上。本文从渲染机制出发，对比父级与子级两种写法带来的本质差异。
一、基本语法与两种设置方式
perspective可以作为独立属性写在普通元素上，也可以作为transform函数的组成部分直接作用于某个元素。这两种写法在DOM结构中的落点不同，导致浏览器建立坐标系的方式也不同。
当写在父级容器上时，它为该容器内部的所有子元素提供统一的透视环境；当写在子元素自身并用perspective()函数包裹时，每个子元素计算自己的透视矩阵。下面分别给出示例。
/* 方式一：父级设置 perspective 属性 */
.scene {
perspective: 800px;
}
.box {
transform: rotateY(45deg);
}
/* 方式二：子级使用 perspective() 函数 */
.box {
transform: perspective(800px) rotateY(45deg);
}
二、父级设置：共享视角与统一灭点
把perspective放在父级，浏览器会先以父级为基准建立一个三维视锥，所有子元素在这个空间里共享同一个观察者位置和灭点。这意味着如果两个子元素分别向z轴正负方向移动，它们会自然地呈现出近大远小的空间关系，就像真实世界里并排摆放的物体。
这种写法适合需要整体三维场景的情况，比如一个展示台上有多张卡片同时翻转。此时配合transform-style: preserve-3d可以让子元素之间保持层级深度，而不是被拍扁到同一平面。示例结构如下：
<div class="scene"> <div class="card">A</div> <div class="card">B</div> </div>
.scene {
perspective: 1000px;
transform-style: preserve-3d;
}
.card {
transform: translateZ(50px) rotateY(30deg);
}
上述代码中，两张卡片处在同一个透视空间，translateZ造成的远近差异会被perspective正确换算成尺寸变化。如果去掉父级perspective，rotateY只会让元素变窄而毫无立体纵深。
三、子级设置：独立透视与局部特写
使用perspective()函数直接写在子元素的transform里，相当于为每个元素单独开了一个摄像机。每个元素根据自己的perspective值计算收缩，但相互之间并没有共享的灭点。这样做的好处是单个元素的透视强度完全自控，不会受父级影响。
缺点是多个 such 元素排在一起时，它们各自透视、彼此割裂，无法形成连续的场景感。以下代码让三个盒子各自带透视旋转，视觉上像三张互不相关的图，而不是同一个空间里的物体：
.box {
transform: perspective(600px) rotateY(40deg);
}
如果此时再给父级加perspective，子级函数里的perspective会覆盖掉父级环境，造成嵌套透视，通常这不是想要的效果。因此要么统一在父级管场景，要么只在子级做独立特效，不要混用。
四、透视原点与常见误区
另一个容易混淆的点是perspective-origin。它只能在设置了perspective的父级上生效，用来移动灭点位置。若在子级用perspective()函数，则无法通过perspective-origin调整视线中心，只能靠改变transform顺序间接模拟。
常见误区是以为在子级写perspective属性和在父级写效果一样。实际上CSS并没有子级perspective属性，只有函数形式。下面列出对比表帮助区分：
| 设置位置 | 语法形式 | 视角共享 | 适用场景 |
|---|---|---|---|
| 父级元素 | perspective属性 | 所有子元素共享 | 整体3D场景、多元素联动 |
| 子级元素 | perspective()函数 | 各自独立 | 单元素特写、局部动画 |
理清这些区别后，在写3D动画时就能主动选择结构：需要舞台感就外层声明perspective，需要单独控制就内层用函数，避免页面出现比例怪异或层级错乱。
CSSperspective3D_transform修改时间：2026-08-04 10:06:27