首先要清楚一點，在css中的x軸正方向從左至右，但是y軸的正方向是從上至下。transform: translate（x,y）
定義2d轉換，沿著x軸和y軸移動，實際上本質和定位當中的left right top bottom一樣。
例如：
.box
/*逆時針按中心點旋轉45度
1. 設定的值代表旋轉的角度(單位deg)
2. 通過設定正負數的方式,控制元素順時針(正數)或者逆時針旋轉(負數)
3. 可以通過transform-origin改變元素的旋轉點位置(傾斜),預設值是center
*/方式一：
transform-origin：middle 以中心點旋轉，預設值
transform-origin：left top 左上角
transform-origin： left bottom 左下角
transform-origin：right top 右上角
transform-origin：right bottom 右下角
方式二：
transform-origin: 100px 100px;
transform: scale(sx, sy);
box
/* 實際上就是x軸方向（也就是寬度）變大2倍，y軸方向（也就是高度）變大2倍
1. 最多能設定兩個值，第乙個值用來改變 寬度，另外乙個值用來改變 高度。
2. 設定縮放的時候，每個值都代表的是 倍數，不能帶單位。
3. 如果希望元素縮小，那麼設定的值在 0 - 1 之間的小數，如果希望放大，則設定大於1的值。
4. 不能設定負數
5. 如果僅設定乙個值,代表元素寬度和高度同時放大或者縮小相應的倍數
*/
transform: skew(30deg, 45deg);
.box
/*沿著水平方向傾斜30度，沿著垂直方向傾斜45度
1. 最多能設定兩個值，都代表傾斜的角度值(deg)。
2. 第乙個值代表元素沿著水平方向發生傾斜角度（x軸方向的兩條邊是不傾斜的）, 第二個值代表元素沿著垂直方向發生傾斜角度(y軸方向的兩條邊是傾斜的)
3. 如果只設定乙個值代表沿著水平方向傾斜斜
1.3d透視（perspective）
css中通過perspective來產生進大遠小的效果
perspective設定方式及取值：
1. 如果希望看到translatez()的』近大遠小』效果，需要新增透視。
2. 給設定了transform屬性元素的』直接父元素』設定透視即可
2. perspective的值可以設定為任意值，但通常推薦設定為600-1000之間
3. 如果希望設定乙個合理的translatez(),這個值應當小於perspective的值
2.位移（translate）
transform: translatex(n)
讓元素沿著x軸移動
設定正數: 從左向右
設定負數: 從右向左
transform: translatey(n)
讓元素沿著y軸移動
設定正數: 從上向下
設定負數: 從下向上
transform: translatez(n) - 新效果 配合perspective使用
讓元素沿著z軸移動
設定正數: 朝向我們視線移動(靠近我們)
設定負數: 背向移動(遠離我們)
說明：生活中我們將這種現象稱為』近大遠小』，元素的與觀察點之間的距離不同，看到的元素尺寸也不同，但實際元素自身並沒有變化，只是一種』視覺差』導致的。
統一總結:
1. 3d中的位移也是相對於元素自身位置。
2. 3d轉換中同樣可以設定百分比,依然相對元素自己寬度和高度(後面的z不能設定百分比)
3.旋轉（rotate）
注意：旋轉了以後，3d座標軸的方向會發生變化的
rotatex(angle)
方向判斷利用左手原則
rotatey(angle)
方向判斷利用左手原則
rotatez(angle)
方向判斷利用左手原則
注：3d旋轉中沿z軸旋轉的效果與2d轉換中的旋轉效果一樣。
4.縮放（scale）
scalex()
沿著x軸放大或縮小
scaley()
沿著y軸放大或縮小
scalez()
沿著z軸放到或縮小
注意：如果希望看到scalez()的效果，該元素必須是立體圖形 。
5.傾斜 （skew）
3d中的傾斜實際和2d中的傾斜是一樣的
skewx()
沿著x軸傾斜，x軸方向的兩條邊平行
skewy()
沿著y軸傾斜，y軸方向的兩條邊平行
6.子元素保留3d轉換
transform-style: flat；
transform-style: preserve-3d;
flat 不保留3d轉換，預設值
preserve-3d; 子元素保留3d轉換，如果不設定這個屬性，內部元素不會存在3d的遮擋關係(偽3d)
- 我們通過立方體案例發現，如果不設定這個樣式，元素是一種偽3d效果，是平面結構
- 設定後可以看到元素呈現立體的顯示效果，但是注意，設定了該樣式，也要旋轉給個角度才可以更直觀的看出是個3d立體圖。
⚠️preserve-3d設定在需要3d顯示效果的父元素上。
css3新特性 過渡 動畫 2d 3d轉換
過渡 過渡三要素 1.必須要有屬性發生變化 如 width background等 2.必須要告訴系統哪個屬性需要執行過渡效果 transition property width,background 3.必須告訴系統過渡效果的持續時長 transition duration 5s,5s trans...
css動畫2D 3D的轉換
可以使用2d,3d來轉換元素 translate 使元素移動 有兩個引數，x和y，x表示水平方向的移動，y表示垂直方向的移動 例如 transfrom translate 100px,100px 例子 transfrom rotate 180deg deg 是乙個度數單位必須寫的 例子 transf...
CSS之2D 3D轉換總結
translate語法 x 就是 x 軸上水平移動 y 就是 y 軸上水平移動 transform translate x,y transform translatex n transfrom translatey n 演示 div rotate 旋轉 2d旋轉指的是讓元素在二維平面內順時針或者逆時...