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

Java—HTML:3D形变

article 2026/1/24 22:09:50

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

相关文章：

Java—HTML:3D形变

今天我要介绍的是在Java HTML中CSS的相关知识点内容之一&#xff1a;3D形变&#xff08;3D变换&#xff09;。该内容包含透视&#xff08;属性&#xff1a;perspective&#xff09;&#xff0c;3D变换&#xff0c;3D变换函数以及案例演示&#xff0c; 接下来我将逐一介绍&…...

编程日记 2026/1/20 2:43:34

什么是音频预加重与去加重，预加重与去加重的原理是什么，在什么条件下会使用预加重与去加重？

音频预加重与去加重是音频处理中的两个重要概念&#xff0c;以下是对其原理及应用条件的详细介绍&#xff1a; 1、音频预加重与去加重的定义 预加重&#xff1a;在音频信号的发送端&#xff0c;对音频信号的高频部分进行提升&#xff0c;增加高频信号的幅度&#xff0c;使其在…...

编程日记 2026/1/19 22:42:48

免费下载 | 2025清华五道口：“十五五”金融规划研究白皮书

《2025清华五道口&#xff1a;“十五五”金融规划研究白皮书》的核心内容主要包括以下几个方面&#xff1a; 一、五年金融规划的重要功能与作用 凝聚共识&#xff1a;五年金融规划是国家金融发展的前瞻性谋划和战略性安排&#xff0c;通过广泛听取社会各界意见&#xff0c;凝…...

编程日记 2026/1/20 20:15:30

微信小程序实战案例 - 餐馆点餐系统 阶段 4 - 订单列表 状态

✅ 阶段 4 – 订单列表 & 状态 目标 展示用户「我的订单」列表支持状态筛选&#xff08;全部 / 待处理 / 已完成&#xff09;支持分页加载和实时刷新使用原生组件编写 ✅ 1. 页面结构&#xff1a;文件结构 pages/orders/├─ index.json├─ index.wxml├─ index.js└─…...

编程日记 2026/1/20 19:07:23

如何为C++实习做准备？

博主介绍&#xff1a;程序喵大人 35- 资深C/C/Rust/Android/iOS客户端开发10年大厂工作经验嵌入式/人工智能/自动驾驶/音视频/游戏开发入门级选手《C20高级编程》《C23高级编程》等多本书籍著译者更多原创精品文章&#xff0c;首发gzh&#xff0c;见文末&#x1f447;&#x1…...

编程日记 2026/1/13 22:27:25

【docker】--部署--安装docker教程

文章目录 环境方法一&#xff1a;脚本安装方法二&#xff1a;手动安装**步骤 1&#xff1a;卸载旧版本&#xff08;如有&#xff09;****步骤 2&#xff1a;更新系统并安装依赖****步骤 3&#xff1a;添加 Docker 官方 GPG 密钥****步骤 4&#xff1a;设置 Docker 仓库****步骤…...

编程日记 2025/11/27 1:31:46

【开发记录】服务外包大赛记录

参加服务外包大赛的A07赛道中&#xff0c;最近因为频繁的DEBUG&#xff0c;心态爆炸 记录错误 以防止再次出现错误浪费时间。。。 2025.4.13 项目在上传图片之后 会自动刷新 没有等待后端返回 Network中的fetch /upload显示canceled. 然而这是使用了VS的live Server插件才这样&…...

编程日记 2025/11/29 10:26:50

Cesium.js（6）：Cesium相机系统

Camera表示观察场景的视角。通过操作摄像机&#xff0c;可以控制视图的位置、方向和角度。 帮助文档&#xff1a;Camera - Cesium Documentation 1 setView setView 方法允许你指定相机的目标位置和姿态。你可以通过 Cartesian3 对象来指定目标位置&#xff0c;并通过 orien…...

编程日记 2026/1/20 20:37:36

AI 代码生成工具如何突破 Java 单元测试效能天花板？

一、传统单元测试的四大痛点 时间黑洞&#xff1a;根据 JetBrains 调研&#xff0c;Java 开发者平均花费 35% 时间编写测试代码覆盖盲区&#xff1a;手工测试覆盖率普遍低于 60%&#xff08;Jacoco 全球统计数据&#xff09;维护困境&#xff1a;业务代码变更导致 38% 的测试用…...

编程日记 2026/1/20 16:47:35

AF3 ProteinDataset类的_patch方法解读

AlphaFold3 protein_dataset模块 ProteinDataset 类 _patch 方法的主要目的是围绕锚点残基（anchor residues）裁剪蛋白质数据，提取一个局部补丁（patch）作为模型输入。 源代码： def _patch(self, data):"""Cut the data around the anchor residues."…...

编程日记 2025/12/18 16:21:45

客户端负载均衡与服务器端负载均衡详解

客户端负载均衡与服务器端负载均衡详解 1. 客户端负载均衡&#xff08;Client-Side Load Balancing&#xff09; 核心概念 定义&#xff1a;负载均衡逻辑在客户端实现&#xff0c;客户端主动选择目标服务实例。典型场景&#xff1a;微服务内部调用&#xff08;如Spring Cloud…...

编程日记 2026/1/20 20:42:29

vue-element-plus-admin的安装

文档链接&#xff1a;开始 | vue-element-plus-admin 之前尝试按照官方文档来安装&#xff0c;运行npm run dev命令却不能正常打开访问浏览器&#xff0c;换一个方式 首先在目录下打开命令窗口 1、克隆项目 从 GitHub 获取代码 # clone 代码 git clone https://github.com…...

编程日记 2025/11/28 0:53:48

基于springboot的“流浪动物管理系统”的设计与实现（源码+数据库+文档+PPT)

基于springboot的“流浪动物管理系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;springboot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统功能结构图 局部E-R图 系统首页界面 系统…...

编程日记 2026/1/19 19:02:05

爬虫解决debbugger之替换文件

鼠鼠上次做一个网站的时候&#xff0c;遇到的debbugger问题&#xff0c;是通过打断点然后编辑断点解决的&#xff0c;现在鼠鼠又学会了一个新的技能 首先需要大家下载一个reres的插件&#xff0c;这里最好用谷歌浏览器 先请大家看看案例国家水质自动综合监管平台 这里我们只…...

编程日记 2026/1/22 1:56:28

奇怪的电梯——DFS算法

题目 题解 每到一层楼都面临了两种选择&#xff1a;上还是下&#xff1f;因此我们可以定义一个布尔数组用来记录选择。 终止条件其实也明显&#xff0c;要么到了B层&#xff0c;要么没有找到楼层。 如果找到了&#xff0c;选择一个步骤少的方式。又怎么表示没有找到楼层&…...

编程日记 2026/1/20 19:48:09

Open GL ES-＞ 工厂设计模式包装 SurfaceView + 自定义EGL的OpenGL ES 渲染框架

XML文件 <?xml version"1.0" encoding"utf-8"?> <com.example.myapplication.EGLSurfaceView xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"…...

编程日记 2026/1/20 15:51:36

2.4goweb加解密和jwt

MD5的基本实现 1. ​​标准库调用​​ Go语言通过crypto/md5包提供MD5算法的实现。核心步骤包括&#xff1a; ​​创建哈希对象​​&#xff1a;使用md5.New()生成一个实现了hash.Hash接口的实例。​​写入数据​​&#xff1a;通过Write()方法或io.WriteString()将数据写入…...

编程日记 2025/12/9 8:44:35

深入解析多表联查（MySQL）

前言 在面试中以及实际开发中&#xff0c;多表联查是每个程序员必备技能&#xff0c;下文通过最简单的学生表和课程表的实例帮大家最快入门多表联查技能。 建立数据表 1. 学生表&#xff08;students&#xff09; 创建学生表 CREATE TABLE students (student_id INT AUTO_…...

编程日记 2026/1/18 16:08:02

宇视设备视频平台EasyCVR打造智慧酒店安防体系，筑牢安全防线

一、需求背景 酒店作为人员流动频繁的场所&#xff0c;对安全保障与隐私保护有着极高的要求。为切实维护酒店内部公共区域的安全秩序&#xff0c;24小时不间断视频监控成为必要举措。通常情况下&#xff0c;酒店需在本地部署视频监控系统以供查看&#xff0c;部分连锁酒店还希…...

编程日记 2026/1/21 16:10:50

C++ 编程指南36 - 使用Pimpl模式实现稳定的ABI接口

一&#xff1a;概述 C 的类布局&#xff08;尤其是私有成员变量&#xff09;直接影响它的 ABI&#xff08;应用二进制接口&#xff09;。如果你在类中添加或修改了私有成员&#xff0c;即使接口不变&#xff0c;编译器生成的二进制布局也会变&#xff0c;从而导致 ABI 不兼容。…...

编程日记 2025/11/27 23:16:11

Linux中的文件传输（附加详细实验案例）

一、实验环境的设置 ①该实验需要两台主机&#xff0c;虚拟机名称为 L2 和 L3 &#xff0c;在终端分别更改主机名为 node1 和 node2&#xff0c;在实验过程能够更好分辨。 然后再重新打开终端&#xff0c;主机名便都更改了相应的名称。 ②用 ip a 的命令分别查看两个主机的 …...

编程日记 2026/1/20 4:19:39

基于 OpenHarmony 5.0 的星闪轻量型设备应用开发——Ch2 OpenHarmony LiteOS-M 内核应用开发

写在前面&#xff1a; 此篇是系列文章《基于 OpenHarmony5.0 的星闪轻量型设备应用开发》的第 2 章。本篇介绍了如何在 OpenHarmony 5.0 框架下&#xff0c;针对 WS63 进行 LiteOS-M 内核应用工程的开发。 为了方便读者学习&#xff0c;需要OpenHarmony 5.0 WS63 SDK 的小伙伴可…...

编程日记 2026/1/20 11:12:39

论文阅读：2024-arxiv How to Steer LLM Latents for Hallucination Detection?

总目录 大模型安全相关研究：https://blog.csdn.net/WhiffeYF/article/details/142132328 How to Steer LLM Latents for Hallucination Detection? https://arxiv.org/pdf/2503.01917 https://www.doubao.com/chat/2818934852496130 其它资料： https://blog.csdn.net/we…...

编程日记 2026/1/14 2:09:42

Linux--线程概念与控制

目录 1. Linux线程概念 1-1 什么是线程 1-2 分⻚式存储管理 1-2-1 虚拟地址和⻚表的由来 1-2-2 物理内存管理 1-2-3 ⻚表 1-2-4 ⻚⽬录结构 1-2-5 两级⻚表的地址转换 1-2-6 缺⻚异常 1-3 线程的优点 1-4 线程的缺点 1-5 线程异常 1-6 线程⽤途 2. Linux进程VS线…...

编程日记 2026/1/20 18:32:53

Python | kelvin波的水平空间结构

写在前面 简单记录一下之前想画的一个图&#xff1a; 思路 整体比较简单&#xff0c;两个子图&#xff0c;本质上就是一个带有投影&#xff0c;一个不带投影&#xff0c;通常用在EOF的空间模态和时间序列的绘制中&#xff0c;可以看看之前的几个详细的画法。 Python | El Ni…...

编程日记 2026/1/22 19:51:46

【音视频】SDL播放PCM音频

相关API 打开音频设备 int SDLCALL SDL_OpenAudio(SDL_AudioSpec * desired, SDL_AudioSpec * obtained); desired&#xff1a;期望的参数。obtained&#xff1a;实际音频设备的参数&#xff0c;一般情况下设置为NULL即可。 SDL_AudioSpec typedef struct SDL_AudioSpec { i…...

编程日记 2026/1/23 4:05:16

BERT - Bert模型框架复现

本节将实现一个基于Transformer架构的BERT模型。 1. MultiHeadAttention 类 这个类实现了多头自注意力机制&#xff08;Multi-Head Self-Attention&#xff09;&#xff0c;是Transformer架构的核心部分。 在前几篇文章中均有讲解&#xff0c;直接上代码 class MultiHeadAtt…...

编程日记 2026/1/20 18:35:09

【LeetCode 热题100】二叉树遍历入门：从中序遍历到层序与右视图（力扣94 / 102/199）（Go语言版）

&#x1f333; 二叉树遍历入门&#xff1a;从中序遍历到层序与右视图 本文涵盖 LeetCode 上的三道基础但极具代表性的二叉树遍历题&#xff1a; 二叉树的中序遍历 二叉树的层序遍历 二叉树的右视图 通过这些题目&#xff0c;我们将从 DFS 到 BFS&#xff0c;深入理解如何处理…...

编程日记 2025/12/16 12:23:46

docker创建容器添加启动--restart选项

一、通过 Docker 命令直接修改已启动的容器&#xff08;推荐-已验证&#xff09; 操作步骤&#xff1a; 1.执行更新命令&#xff1a; docker update --restartalways <容器名或ID>此命令会将容器的重启策略调整为 always&#xff08;无论容器以何种状态退出&#xff0…...

编程日记 2026/1/21 12:18:22

一文读懂WPF系列之常用控件以及样式

WPF控件 控件分类概览常用控件常用控件代码示例和效果 样式与模板应用样式定义​​方式行内样式​​页面/窗口级资源样式&#xff08;Local Resource&#xff09;应用程序全局资源独立资源字典&#xff08;ResourceDictionary&#xff09;控件模板&#xff08;ControlTemplate&…...

编程日记 2026/1/22 21:11:47