3d：我們生活的環境是3d的，**就是3d物體在2d平面呈現的例子。
3d的特點：
（1）、近大遠小；
（2）、物體後面遮擋不可見。
3d轉換我們主要學習工作中最常用的3d位移和3d旋轉
我們先大致了解一下主要知識點然後下面在詳細的說一下，我們主要的知識點分4個分別是：.
（1）、3d位移：translate3d(x，y，z)
（2）、3d旋**rotate3d(x，y，z)
（3）、透視：perspective
（4）、3d呈現：transfrom-style
三維座標系其實就是指立體空間，立體空間是由3個軸共同組成的。
（1）、x軸：水平向右
注意：x右邊是正值，左邊是負值；
（2）、y軸：垂直向下
注意：y下面是正值，上面是負值；
（3）、z軸：垂直螢幕
注意：往外面是正值，往裡面是負值。
話不多述上圖感受一下：
3d移動在2d移動的基礎多加了乙個可以移動的向，就是z軸方向。
它的用法：
1、translform:translatex(100px) ：僅僅是在x軸上移動；
2、translform:translatey(100px) ：僅僅是在y軸上移動；
3、translform:translatez(100px) ：僅僅是在z軸上移動(注意：translatez- 般用px單位 )；
4、transform:translate3d(x,y,z) ：其中x、y、z分別指要移動的軸的方向的距離。
在2d平面產生近大遠小視覺立體，但是只效果二維的
它的作用：
1、如果想要在網頁產生3d效果需要透視(理解成3d物體投影在2d平面內)。
2、模擬人類的視覺位置，可認為安排乙隻眼睛去看。
3、透視我們也稱為視距：視距就是人的眼睛到螢幕的距離。
4、距離視覺點越近的在電腦平面成像越大，越遠成像越小。
5、透視的單位是畫素。
注意：透視寫在被觀察元素的父元素上面的。
我給大家上兩張感受一下：
這裡面d：就是視距，視距就是乙個距離人的眼睛到螢幕的距離。
z：就是z軸，物體距離螢幕的距離，軸越大(正值)我們看到的物體就越大。
translform:translatez(100px)：僅僅是在軸上移動。
有了透視，就能看到translatez引起的變化了
說一下它如何取值：
1、translatez：近大遠小
2、translatez：往外是正值
3、translatez：往裡是負值
它的作用和取值：
1、控制子元素是否開啟三維立體環境。
2、transform-style:flat元索不開啟3d立體空間預設的
3、transform-style:preserve-3d；子元素開啟立體空間
注意：1、**寫給父級，但是影響的是子元素
2、這個屬性很重要，後面必用…
瀏覽器私有字首是為了相容老版本的寫法，比較新版本的瀏覽器無須新增。
1、簡單的來說一下它們的私有字首：
（1）、-moz-：代表firefox瀏覽器私有屬性；
（2）、-ms-：代表ie瀏覽器私有屬性
（3）、-webkit-：代表safari、chrome 私有屬性
（4）、-0-：代表opera私有屬性
2、再說一下它們的提倡的寫法：
-moz-border-radius:：10px；
-webkit-border-radius：10px；
-o-border-radius：10px；
border-radius：10px；
在這裡先簡單提一下…
CSS3的2D轉換和3D轉換
rotate 使用transform元素中的rotate方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。transform rotate 11deg ms transform rotate 11deg internet explorer moz transform rotate 11de...
css3 3d轉換和3D動畫
rotatex 沿x軸翻轉 rotatey 沿y軸翻轉 rotatez 沿z軸翻轉 類似於rotate 在水平旋轉 transform translate3d 30px,30px,800px transform translatez 800px translatex 30px translatey ...
3D轉換 兩面翻轉盒子和3d導航欄
3d轉換和2d轉換的最大區別就是，2d是二維座標系，是平面的，而3d是三維座標系，具有空間感 立體感。在3d轉換中，有兩個特別重要的屬性perspective transform style。perspective 透視，也叫視距，就是人眼距離螢幕的距離。距離螢幕越近 透視越小 物體越大，距離螢幕越...