3D立體空間的3根軸線

- x軸：水平，向右為正，向左為負

- y軸：垂直，向下為正，向上為負

- z軸：垂直于屏幕，向外為正，向內為負

#### 1）3D必備屬性

- transform-style: preserve-3d; 創建3d空間

- 什么時候搭建3d舞臺？

? - 父元素有3D變形，子元素也有3D變形

- perspective屬性：景深（透視），屬性值為透視點到元素的距離，近大遠小；也可以讓網頁產生3D效果，單位像素

- preserve-3d， 如果搭配overflow: hidden/scroll/auto使用，相當于2D效果

> transform-style屬性和perspective屬性放在父元素中,有時候perspective屬性放在body中

#### 2) 位移

- transform: translateZ(z); 沿著z軸方向位移

- transform: translate3d(x,y,z) 沿著x、y、z軸方向位移

? z指的是 z 軸的向量位移長度。當其值為負值時，元素在 Z 軸越移越遠，導致元素變小。反之當值為正值時，

? 其在 Z 軸越移越近，導致元素變得較大。

總結

以上是生活随笔為你收集整理的创建3D空间的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。