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視覺效果，單獨設置一個可能看不到想要的結果。
