特點：近大遠小，物體和面遮擋不可見
1.1三維座標系
x 軸：水平向右 --x 軸右邊是正值，左邊是負值
y 軸：垂直向下 --y 軸下面是正值，上面是負值
z 軸：垂直螢幕 --往外邊的是正值，往裡面的是負值
2.1 語法
transform:translate3d(x,y,z);
transform:translatez(z);
.box3
.box4
.box5
1.translate3d裡面的3d要小寫。
2.translate3d後面的值一定是三個值(x,y,z)，不能省略，沒有的就寫0，且順序不能顛倒。
3.3d的z值一般都是精準的畫素值。
4.z值為正數就是往外面移動，為負數就是往裡面移動
1.產生3d效果必須寫透視。
2.透視就是視距，即人眼到螢幕的距離。
3.近大遠小
4.透視prespective的單位是畫素
5.透視寫在被觀察元素的父盒子上。
給父元素加perspective後，再給子元素新增translatez會產生近大遠小。
body
.box1
.box2
transform: rotatex(45deg)-- 沿著 x 軸正方向旋轉 45 度，即上邊向後轉
transform: rotatex(-45deg)-- 沿著 x 軸反方向旋轉 45 度，即上邊向前轉
5.2 rotatey
transform: rotatey(45deg)-- 沿著 y 軸正方向旋轉 45 度，即右邊向後轉
transform: rotatey(-45deg)-- 沿著 y 軸反方向旋轉 45 度，即左邊向後轉
5.3 rotatez
transform: rotatez(45deg)-- 沿著 z 軸正方向旋轉 45 度，即順時針
transform: rotatez(-45deg)-- 沿著 z 軸反方向旋轉 45 度，即逆時針
5.4 rotate3d
transform: rotate3d(x, y, z, 45deg)-- 沿著自定義軸旋轉 45 deg 為角度
transform: rotate3d(1, 1, 0, 45deg)-- 沿著左上右下對角線旋轉 45度
rotate()預設就是rotatez()。
6 3d呈現—transfrom-style
控制子元素是否開啟三維立體環境 ，真3d。
6.1 用法
/* 給父元素加preserve-3d */
/* 預設是flat,不開啟三維立體環境 */
/* transform-style: flat; */
transform-style: preserve-3d;
1.**給父親加，影響的是子元素
2.預設是flat,不開啟，preserve-3d開啟
3.作用是當父元素3d變換時，子元素任然保留之前的3d狀態。
6.3 與視距的區別
preserve-3d是真3d，讓子元素保留了3d空間。
perspective是偽3d，傻瓜式近大遠小，只是起輔助視覺觀察效果的作用。
7.1翻轉盒子案例
上傳不了，可將案例中的任意替換
前後
左右上下
03 CSS3背景與漸變
css3的背景縮寫 background color position size repeat origin clip attachment image 按照該順序，不能省略 background clip background clip border box padding box content...
CSS3的2D轉換和3D轉換
rotate 使用transform元素中的rotate方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。transform rotate 11deg ms transform rotate 11deg internet explorer moz transform rotate 11de...
CSS3 Transform變形（3D轉換）
三維變換使用基於二維變換的相同屬性，如果您熟悉二維變換，你們發現3d變形的功能和2d變換的功能相當類似。css3中的3d變換主要包括以下幾種功能函式 3d位移 css3中的3d位移主要包括translatez 和translate3d 兩個功能函式 3d旋 css3中的3d旋轉主要包括rotatex...