3D轉換
3D轉換
3D轉換顧名思義就是在原2D轉換基礎上增加Z軸變化效果
一、三維座標系
x軸：水平向右 注意：右邊是正值，左邊是負值
y軸: 垂直向下 注意：y下面是正值，上面是負值
z軸： 垂直螢幕 注意：往外面是正值，往裡面是負值
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-zdP2OVN1-1611912463183)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210124114153502.png)]
transfroom:translateX(100px) translateY(100px) translateZ(100px); //此時既有x軸也有y軸移動 translateZ //沿著z軸移動，後面單位一般px ，向外移動 transfrom:translate3d(x,y,z); //3d移動簡寫；注意：x,y,z 不能省略
二、透視 perspective 實現近大遠小
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-dOcPfXWM-1611912463195)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210124115913831.png)]
透視也稱視距：視距就是眼睛到螢幕的距離
透視寫到被觀察元素的父盒子上
d：視距
z:z軸，軸越大，我們 看到的物體越大
三、旋轉 rotate3d
可以在三維平面內沿著x,y,z軸旋轉
對於元素旋轉的方向判斷，我們可以使用左手準則：
左手的拇指指向X軸的正方向；其餘手指的彎曲方向就是該元素沿著X軸旋轉的方向
transform:rotate3d(x,y,z,deg); //沿著自定義旋轉軸deg為角度旋轉，xyz是表示旋轉軸的向量，是標識你是否希望沿著該軸旋轉
transform:rotate3d(1,0,0,45deg); //沿著x軸旋轉45度
transform:totate3d(1,1,0,45deg); //沿著對角線旋轉45deg
3d呈現 transfrom-style
控制子元素是否開啟三維立體環境：
transform-style:flat 子元素不開啟3d立體空間
transform-style:preserve-3d;子元素開啟立體空間
但是程式碼要寫給父級，但是影響的是子盒子
四、瀏覽器的私有字首
瀏覽器的私有字首是為了相容老版本的寫法
-moz-;代表firefox（火狐）瀏覽器的私有屬性
-ms-:代表ie瀏覽器私有屬性
-webkit-: 代表safari\chrome私有屬性
-o-:代表opera私有屬性
提倡寫法
-moz-border-radius:10px;