Java—HTML:3D形变

news2025/4/16 3:37:23

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

案例注解：