3D变形：平移、旋转、缩放
什么是3d轉換
定義元素在三維空間移動、縮放、旋轉
3d坐標軸（圖示）
3D立體空間的3根軸線
-
x軸：水平，向右為正，向左為負
-
y軸：垂直，向下為正，向上為負
-
z軸：垂直于屏幕，向外為正，向內為負
1）3D必備屬性
-
transform-style: preserve-3d; 創建3d空間
-
什么時候搭建3d舞臺？
-
父元素有3D變形，子元素也有3D變形
-
-
perspective屬性：景深（透視），屬性值為透視點到元素的距離，近大遠小；也可以讓網頁產生3D效果，單位像素
- 一般取值：800px-1000px perspective：800px 就是人離屏幕800px 的地方觀看這個div元素。 當translateZ的大小臨近與800px時圖片離我們越來越近了 當它大于800px時，這個圖片就消失了 ? 反之當translateZ為負值時，我們可以看到圖片變小了，也就是圖片離人越來越遠了。
-
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 軸越移越近，導致元素變得較大。
3) 旋轉
-
transform: rotateX(a); 沿著x軸方向旋轉
-
a 指的是一個旋轉角度值，如果為正值，元素圍繞X軸順時針旋轉；反之，如果為負值，元素圍繞X軸逆時針旋轉。
-
transform: rotateY(a); 沿著y軸方向旋轉
-
a 指的是一個旋轉角度值，如果為正值，元素圍繞Y軸順時針旋轉；反之，如果為負值，元素圍繞Y軸逆時針旋轉。
-
transform: rotateZ(a); 沿著Z軸方向旋轉
-
a 指的是一個旋轉角度值，如果為正值，元素圍繞 Z 軸順時針旋轉；反之，如果為負值，元素圍繞 Z 軸逆時針
旋轉。
-
transform: rotate3d(x,y,z,angle);
-
參數：
x：是一個 0 到１之間的數值，主要用來描述元素圍繞 X 軸旋轉的矢量值。
y：是一個 0 到１之間的數值，主要用來描述元素圍繞 Y 軸旋轉的矢量值。
z：是一個 0 到１之間的數值，主要用來描述元素圍繞 Z 軸旋轉的矢量值。
angle：一個角度值，指定在 3D 空間旋轉角度，正值順時針旋轉，反之元素逆時。
4）縮放
-
transform: scaleZ() 沿著z軸方向縮放 (厚度)
-
transform: scale3d() 沿著x、y、z軸方向縮放
-
取值
-
默認值為1
-
使用0~1之間的值縮小元素 使用超過1的值放大元素
-
-
注意：scaleZ單獨使用看不到效果，需要配合其他變換屬性一起使用
3D縮放Z軸演示
<!doctype html> <html> ? <head><meta charset="utf-8"><title>無標題文檔</title> ?<style>.wrap {width: 1000px;height: 600px;border: 1px solid red;perspective: 500px;perspective-origin: right top;} ?.box {position: absolute;left: 50%;margin-left: -100px;top: 50%;margin-top: -100px;width: 200px;height: 200px;transform-style: preserve-3d;/* transform: scale3d(1.5, 1, 1.5); */transform: scaleZ(1.5);} ?.box div {position: absolute;left: 0;top: 0;width: 200px;height: 200px;} ?.box div:nth-child(1) {background: red;transform: rotateX(90deg) translateZ(100px);} ?.box div:nth-child(2) {background: yellow;transform: rotateX(90deg) translateZ(-100px);} ?.box div:nth-child(3) {background: green;transform: rotateY(90deg) translateZ(100px);} ?.box div:nth-child(4) {background: blue;transform: rotateY(90deg) translateZ(-100px);} ?.box div:nth-child(5) {background: pink;transform: translateZ(100px);} ?.box div:nth-child(6) {background: orange;transform: translateZ(-100px);}</style> ? </head> ? <body><div class="wrap"><div class="box"><div class="bg1"></div><div class="bg2"></div><div class="bg3"></div><div class="bg4"></div><div class="bg5"></div><div class="bg6"></div></div></div> </body> ? </html>總結
以上是生活随笔為你收集整理的3D变形：平移、旋转、缩放的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vite 配置 cdn 加载资源
- 下一篇： Android 应用统一字体设置 typ