今天我要介绍的是在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形变的知识点内容能对你带来一定的帮助，同时非常感谢各位大佬的点赞与支持，咱们下一篇使用不见不散