perspective控制观察者与3d空间的距离，影响透视效果强弱；transform-style决定子元素是否在共享的3d空间中渲染。1. perspective数值越小透视越强，可作用于父容器或单独元素，未设置则无立体感，设置不当会导致变形夸张或无效；2. transform-style: preserve-3d需显式声明，父元素需有3d变换才能生效，仅决定共享空间不影响透视；3. 实际应用中，构建3d结构时需同时设置父容器preserve-3d和外层容器perspective，两者配合才能实现自然3d效果。
在CSS实现3D效果时，perspective 和 transform-style 是两个常被提到的属性，但它们的作用完全不同。简单来说，perspective 控制的是观察者与3D空间的距离，决定了3D元素的透视效果强弱；而 transform-style 决定子元素是否在同一个3D空间中渲染。
下面从几个实际角度来说明它们的区别和使用方式。
1. perspective：控制3D透视感
perspective 类似于人眼观察世界的方式。数值越小，透视效果越强烈（看起来像是离得更近），数值越大则越平缓（像是离得远）。
立即学习“前端免费学习笔记（深入）”；
- 它可以作用在父容器上，影响所有子元素。
- 也可以通过
transform: perspective(...)单独作用在某个元素上。
举个例子：
.container {
perspective: 600px;
}这个设置会让 .container 里的所有3D变换元素产生透视效果。如果你把值调成 200px，就会看到元素“突”出来的感觉更强了。
常见问题：
- 如果没设置
perspective，即使用了rotateX或rotateY，也看不出立体感。 - 设置得太小会导致变形夸张，太大又像没变化。
2. transform-style: preserve-3d：保持3D空间层级
当你希望多个子元素在一个共享的3D空间里呈现，而不是各自独立地“压扁”到2D平面时，就要用到 transform-style: preserve-3d。
默认情况下，浏览器会将每个子元素渲染为独立的2D层，这样即使你在子元素上做了旋转，父子之间的空间关系也不会保留。
例如：
.parent {
transform-style: preserve-3d;
}
.child {
transform: rotateY(45deg);
}这样，.child 就会真正处于一个共享的3D空间中，和其他兄弟元素一起构成一个立体结构。
关键点：
- 必须显式声明
transform-style: preserve-3d - 父元素必须有3D变换（如
rotate,translate3d）才能生效 - 不会影响透视强度，只决定是否共享3D空间
3. 实际应用中的区别总结
| 属性 | 功能 | 常见用途 |
|---|---|---|
perspective |
控制整体3D视角距离 | 让3D变换看起来更真实、有深度 |
transform-style |
控制子元素是否共享3D空间 | 构建多个元素组成的3D结构（如立方体） |
举个典型场景：你想做一个3D立方体，每个面都是一个div。这时候：
- 需要给父容器加上
transform-style: preserve-3d，让各个面共存于同一空间 - 给外层容器或视图区域加上
perspective，让人感觉像是在“看”这个立方体
基本上就这些。两者配合使用，才能做出自然的3D视觉效果，单独设置一个可能看不到想要的结果。
