欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 八卦 > Java—HTML:3D形变

Java—HTML:3D形变

2025/4/16 14:31:32 来源:https://blog.csdn.net/2501_90297049/article/details/147112271  浏览:    关键词:Java—HTML:3D形变

今天我要介绍的是在Java HTML中CSS的相关知识点内容之一:3D形变(3D变换)。该内容包含透视(属性:perspective),3D变换,3D变换函数以及案例演示,

接下来我将逐一介绍:

透视(Perspective)

      perspective属性用于创建3D空间的深度感知效果,通过设置观察者与3D元素的距离(单位:像素),使子元素的Z轴位移产生近大远小的透视效果。未设置该属性(Perspective)时,所有3D变换会被压扁到同一平面显示。

二、基础语法

模拟人眼观察3D物体的视觉效果,控制元素的深度感和立体感。

.container {perspective: 1000px;      /* 父容器设置透视 */perspective-origin: 50% 50%; /* 默认中心视角 */
}

注解:

perspective:

  1. 定义观察者与3D元素之间的视距(单位:像素)。
  2. 值越小,透视越强(如 perspective: 500px)。
  3. 必须设置在父容器上,影响所有子元素的3D变换。

perspective-origin:

  1. 定义观察者的视角位置(默认:50% 50%,即中心)。
  2. 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形变的知识点内容能对你带来一定的帮助,同时非常感谢各位大佬的点赞与支持,咱们下一篇不见不散

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词