今天我要介紹的是在Java HTML中CSS的相關知識點內容之一：3D形變（3D變換）。該內容包含透視（屬性：perspective），3D變換，3D變換函數以及案例演示，
接下來我將逐一介紹：
透視（Perspective）
? ? ? perspective屬性用于創建3D空間的深度感知效果，通過設置觀察者與3D元素的距離（單位：像素），使子元素的Z軸位移產生近大遠小的透視效果。未設置該屬性（Perspective）時，所有3D變換會被壓扁到同一平面顯示。
二、基礎語法
模擬人眼觀察3D物體的視覺效果，控制元素的深度感和立體感。
.container {perspective: 1000px; ?????/* 父容器設置透視 */perspective-origin: 50% 50%; /* 默認中心視角 */
}注解：
perspective：
- 定義觀察者與3D元素之間的視距（單位：像素）。
- 值越小，透視越強（如
perspective: 500px）。 - 必須設置在父容器上，影響所有子元素的3D變換。
perspective-origin：
- 定義觀察者的視角位置（默認：
50% 50%，即中心）。 perspective-origin: 20% 80%（左下視角）。
綜合案例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.container {perspective: 500px;width: 300px;height: 400px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.box {height: 100%;background: #333333;transition: 2s;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}.box:hover {transform: rotateY(180deg);}</style></head><body><div class="container"><div class="box"></div></div></body>
</html>效果呈現：
未觸發時；
?觸發中：
?觸發完成：
?注解：perspective：透視，數值越小越透明。
3D變換
transform-style: preserve-3d
- 使子元素在3D空間中保持立體效果（必須設置在父容器）。
.container {transform-style: preserve-3d;
}變換函數圖解：
?介紹：
? ? ?CSS?的 3D transform 允許在三維空間中操作元素，通過平移、旋轉、縮放、傾斜等變換實現立體效果。其核心是通過 transform 屬性結合輔助屬性（如 perspective）控制元素的 3D 表現
結合以上函數以及transform屬性進行變換案例：
內容：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.con{perspective: 500px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}.box{height: 200px;width: 100px;background-color:#333333;transform-style: preserve-3d;transition: 2s;}.box:hover{transform: rotateY(180deg);}.box>div{width: 100%;height: 100%;position: absolute;}.aa{background-color: blue;transform: rotateY(180deg) translateZ(50px);}.bb{background-color: yellow;transform: rotateY(180deg) translateZ(-50px);}</style></head><body><div class="con"><div class="box"><div class="aa"></div><div class="bb"></div></div></div></body>
</html>主要內容：
效果：（切面圖解）；
未觸發時：
觸發中：
觸發后：
綜合案例演示：
內容：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>正方盒</title><style>.con{perspective: 500px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}.box{height: 100px;width: 100px;/* background-color:#333333; */transform-style: preserve-3d;transition: 2s;}.con:hover .box{transform: rotate3d(1,1,1,180deg);}.box>div{width: 100%;height: 100%;position: absolute;}.aa{background-color: blue;transform: translateZ(50px);text-align: center;}.bb{background-color: yellow;transform: translateZ(-50px);text-align: center;}.cc{background-color: brown;transform: translateZ(50px) rotateY(90deg);transform-origin: left center;text-align: center;}.dd{background-color: red;transform: translateZ(50px) rotateY(-90deg);transform-origin: right center;text-align: center;}.ee{background-color: pink;transform: translateZ(50px) rotateX(-90deg);transform-origin: top center;text-align: center;}.ff{background-color: orange;transform: translateZ(50px) rotateX(90deg);transform-origin: bottom center;text-align: center;}</style></head><body><div class="con"><div class="box"><div class="aa"> A</div><div class="bb"> B</div><div class="cc"> C</div><div class="dd"> D</div><div class="ee">E</div><div class="ff"> F</div></div></div></body>
</html>?效果呈現：3D方盒變換視頻：
WeChat_20250410215308
?（六面包裹為方形3D效果）
??案例注解：
?總結：
?希望本文有關于3D形變的知識點內容能對你帶來一定的幫助，同時非常感謝各位大佬的點贊與支持，咱們下一篇使用不見不散
+異常處理)
