当前位置：首页 > news >正文

Java—HTML:3D形变

news 2025/5/2 8:40:32

今天我要介绍的是在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效果）

案例注解：