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

Java—HTML:3D形变

news 来源：原创 2025/9/16 3:22:54

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

Java—HTML:3D形变

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

编程日记 2025/9/16 3:22:54

Zotero PDF Translate 翻译插件使用OpenAI API配置教程

PDF Translate：提升 Zotero 内置 PDF 阅读器的翻译功能 “PDF Translate” 是一款为 Zotero 设计的插件，旨在方便用户在 Zotero 内置的 PDF 阅读器中进行划词或段落翻译，辅助阅读外文文献。一、安装插件下载插件： 访问 PDF T…...

编程日记 2025/9/11 11:31:07

[raspberrypi 0w and respeaker 2mic]实时音频波形

0. 环境 ubuntu22主机， 192.168.8.162， raspberry 0w， 192.168.8.220 路由器 1. 树莓派 # rpi - send.py # 或者命令行：arecord -D plughw:1,0 -t wav -f cd -r 16000 -c 2 | nc 192.168.8.162 12345import socket imp…...

编程日记 2025/9/11 7:08:47

go-zero自动生成repository文件和测试用例

文章目录 repository的作用自动生成repository文件repo模板文件repo_test模板文件生成结果运行测试用例 repository的作用在软件开发中，尤其是在采用分层架构或者领域驱动设计（DDD）的项目里，repository（仓库&#xf…...

编程日记 2025/9/16 20:28:46

红宝书第三十六讲：持续集成（CI）配置入门指南

红宝书第三十六讲：持续集成（CI）配置入门指南资料取自《JavaScript高级程序设计（第5版）》。查看总目录：红宝书学习大纲一、什么是持续集成？ 持续集成（CI）就像咖啡厅的…...

编程日记 2025/9/16 8:29:00

【Java学习】如何利用AI学习Java语言开发（二）

利用AI辅助学习Java语言开发可以显著提高学习效率、解决实际问题和优化代码质量。以下是结合AI工具和方法的系统化学习路径：一、AI辅助学习基础阶段智能交互式学习平台使用Codecademy（AI驱动版）或JetBrains Academy的Java课程，AI会根据你的代码实时提供修正建议尝试Ch…...

编程日记 2025/9/10 19:34:41

【C++算法】53.链表_重排链表

文章目录题目链接：题目描述：解法C 算法代码： 题目链接： 143. 重排链表题目描述： 解法模拟找到链表的中间节点快慢双指针把后面的部分逆序双指针，三指针，头插法合并两个链表合并两个有…...

编程日记 2025/9/4 7:11:17

Ubuntu安装Docker引擎

安装Docker引擎一、注意事项防火墙兼容性若使用 ufw 或 firewalld，Docker 容器端口会绕过防火墙规则。建议通过 iptables 或 ip6tables 配置防火墙，并将规则添加到 DOCKER-USER 链。仅支持 iptables-nft 和 iptables-legacy&#xff0…...

编程日记 2025/9/9 4:11:46

[目标检测]2023ICCV：DiffusionDet: Diffusion Model for Object Detection

作者：Shoufa Chen, Peize Sun, Yibing Song, Ping Luo 论文：https://arxiv.org/pdf/2211.09788v2 代码：https://github.com/ShoufaChen/DiffusionDet 摘要我们提出了一个新的框架DiffusionDet， 将目标检测构建为从噪声框到目标…...

编程日记 2025/9/10 15:50:39

CExercise_09_结构体和枚举_2VS的Debug模式查看它的内存布局,采用结构体数组的方式存储信息,调用函数打印结构体数组.

题目： 下面结构体类型的变量的内存布局是怎样的？请使用VS的Debug模式查看它的内存布局 typedef struct stundent_s {int number;char name[25];char gender;int chinese;int math;int english; } Student;// 结构体对象的声明和初始化 Student s1 { 1, …...

编程日记 2025/9/11 12:22:51

LeetCode 热题 100_零钱兑换（85_322_中等_C++）（动态规划）

LeetCode 热题 100_零钱兑换（85_322） 题目描述：输入输出样例：题解：解题思路：思路一（动态规划）： 代码实现代码实现（思路一（动态规划）&a…...

编程日记 2025/9/8 1:30:09

Java——抽象方法抽象类接口详解及综合案例

1.抽象方法抽象类介绍抽象方法: 将共性的行为(方法)抽取到父类之后， 由于每一个子类执行的内容是不一样， 所以，在父类中不能确定具体的方法体。该方法就可以定义为抽象方法。抽象类: 如果一个类中存在抽象方法，那么该类就必须…...

编程日记 2025/9/16 0:52:18

国产芯片解析：LDR6501 Type-C接口OTG充电PD芯片详解

LDR6501 是一款专为 USB Type-C 设备设计的单C口DPR接口PD通信芯片，封装形式为 SOT23-6。此款芯片具有多项实用功能，在耳机转接器、领夹麦克风以及 OTG 转接头等应用中表现出色。应用领域 ‌耳机转接器‌：许多新型耳机采用 Type-C 接口&am…...

编程日记 2025/9/11 1:15:15

Payoneer(P卡）会关联吗？如何有效防止P卡关联？

随着跨境电商和全球支付需求的增加，Payoneer（简称P卡）成为了许多商家和个人进行国际支付和收款的重要工具。Payoneer是一种全球支付平台，支持用户跨国收款、汇款，并提供多种货币的账户支持。许多从事跨境电商的商家和…...

编程日记 2025/9/12 19:32:22

前端基础之《Vue（3）—计算属性》

一、computed选项 1、计算属性语法：在computed选项中，定义计算属性方法，在方法体使用声明式变量进行若干计算。 2、计算属性一定是个函数。一定有返回值。 3、计算属性的作用 （1）用于优化指令的表达式，…...

编程日记 2025/9/12 16:57:12

【Linux】Linux 权限：数字背后的神秘 “门禁卡” 系统

目录权限的基本概念Linux上用户的分类超级用户和普通用户用户之间的切换文件访问者的分类文件属性与访问权限Linux下的文件类型文件后缀在Linux中的作用文件自身的属性【⭐】文件访问者的三种权限【rwx】文件权限值的表示方法文件访问权限的相关设置方法chmod——设置文件的…...

编程日记 2025/9/16 6:32:31

Java中List方法的使用详解

目录一、List接口概述二、List常用方法（一）创建List对象（二）添加元素（三）删除元素（四）查找元素（五）遍历列表（六）列表的大小&#xff…...

编程日记 2025/9/14 13:23:31

Can We Edit Multimodal Large Language Models? ➡️ 论文标题：Can We Edit Multimodal Large Language Models? ➡️ 论文作者：Siyuan Cheng, Bozhong Tian, Qingbin Liu, Xi Chen, Yongheng Wang, Huajun Chen, Ningyu Zhang ➡️ 研究机构: 浙江大…...

编程日记 2025/9/6 10:11:46

JS—防抖和节流：1分钟掌握防抖和节流

个人博客：haichenyi.com。感谢关注一. 目录一–目录二–防抖三–节流四–进阶应用五–总结二. 防抖（Debounce） 防抖（Debebounce）和节流（Throttle）都是前端开发中用于优化高频事件性能的两…...

编程日记 2025/9/9 13:42:09

MCP基础学习二：MCP服务搭建与配置

文章目录 MCP服务搭建与配置一，学习目标：二，学习内容：1. 如何搭建MCP服务端服务端初始化与配置MCP服务架构与数据流交互图核心实现注册服务功能服务器启动与API暴露 2. 本地应用与MCP服务的集成客户端SDK实现客户端应用实现功能演…...

编程日记 2025/9/12 17:27:24

MyBatis 操作数据库

目录什么是MyBatis? 注释 Mapper注释的介绍和使用 Select注释的介绍和使用 SpringBootTest注释的介绍和使用 Test注释的介绍的使用 MyBatis入门 1）准备工作 <1>创建工程 <2>数据准备 2）配置数据库连接字符串 3&#xff…...

编程日记 2025/9/6 21:37:03

蓉光：科技与自然的千年交响

故事背景故事发生在中国四川成都，这座千年古城在近未来完成蜕变，青城山的云雾与锦江的碧波间，智能建筑如雨后春笋般生长。全城建筑采用太阳能皮肤，街道流淌着数字化的都江堰水系，杜甫草堂的飞檐与机械芙蓉树共舞&…...

编程日记 2025/9/8 9:18:58

[C语言]gets和fgets函数区别及详解

一、gets 每当讨论 gets 函数时，大家不由自主地就会想起 1988 年的“互联网蠕虫”，它在 UNIX 操作系统的 finger 后台程序中使用一个 gets 调用作为它的攻击方式之一。很显然，对蠕虫病毒的实现来说， gets 函数的功劳不可小视。不…...

编程日记 2025/9/10 0:15:28

【场景应用3】audio_classification：音频分类的微调

1 引言本笔记展示了如何对多语种预训练的语音模型进行微调，以实现自动语音识别（Automatic Speech Recognition）。本笔记旨在使用SUPERB数据集中的关键词检测子集，并且可以使用任何来自模型库（Model Hub）的语音模型检查点，只要该模型有一个包含序列分类头（Sequence …...

编程日记 2025/9/14 10:09:28

【前端】【难点】前端富文本开发的核心难点总结与思路优化

前端富文本开发的核心难点总结富文本编辑器在前端开发中广泛应用于内容管理系统、文章发布、评论区等场景。其开发与集成存在较多复杂性，涵盖内容结构管理、交互体验、跨平台兼容性等方面，以下逐项分析。二、富文本开发的具体难点分析 （一…...

编程日记 2025/9/4 3:10:27

如何优雅使用 ReentrantLock 进行加解锁：避免常见坑点，提高代码可维护性

引言：锁的基本概念和问题在多线程编程中，为了确保多个线程在访问共享资源时不会发生冲突，我们通常需要使用锁来同步对资源的访问。Java 提供了不同的锁机制，其中 ReentrantLock 是一种最常用且功能强大的锁，它属于…...

编程日记 2025/9/12 13:25:28

帕金森患者行动迟缓，日常生活怎么破局？

帕金森病，是一种常见于中老年人的神经退行性疾病，正悄然改变着无数患者的生活轨迹。它初期症状隐匿，常以手抖为信号，起初可能只是在安静状态下，手部出现轻微且有节律的震颤，随着时间推移，震颤逐…...

编程日记 2025/9/16 4:06:20

7-openwrt-one通过web页面配置访客网络、无线中继等功能

前几个章节一直在介绍编译、分区之类的，都还没正常开始使用这个路由器的wifi。默认wifi是没有启动的，前面还是通过手动修改uci配置启动的，这个章节介绍下官方web页面的使用。特别是访客网络、无线中继 1、开启wifi，配置wifi基本信息我们使用有线连接路由器，通过192.168.…...

编程日记 2025/9/8 1:30:11

塑造现代互联网的力量：Berkeley在网络领域的影响与贡献

引言 “Berkeley” 这个名字在计算机网络和互联网领域中具有举足轻重的地位，许多关键的技术、协议和工具都与其紧密相关。它与加利福尼亚大学伯克利分校（UC Berkeley） 密切相关，该校在计算机科学与网络研究中做出了许多开创性的…...

编程日记 2025/9/13 16:45:13

大数据学习（105）-Hbase

🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言📝支持一…...

编程日记 2025/9/16 7:15:09

c# 系列pdf转图片各种处理3--net3.1到net8 PDFtoImage

最近一直在做pdf渲染图片的问题，nuget PDFtoImage 支持3.1到net8 ，直接上代码 private static void DownloadFileAsync(string url, string localPath){using (HttpClient client new HttpClient()){client.DefaultRequestHeaders.Add("User-Agen…...

编程日记 2025/9/8 21:42:45

宁德时代25年春招笔试演绎数字推理SHL测评题库

宁德时代校招测评包含演绎推理数字推理两部分，请单击以下链接进行测评，详细操作指引请参见如下指引，请在测试前了解，大约用时60分钟。正式测评有两个部分:数字推理18分钟演绎推理18分钟，数字推理共10题，演绎…...

编程日记 2025/9/12 4:19:45

C# 看门狗策略实现

using System; using System.Threading;public class Watchdog {private Timer _timer;private volatile bool _isTaskAlive;private readonly object _lock new object();private const int CheckInterval 5000; // 5秒检测一次private const int TimeoutThreshold 10000; …...

编程日记 2025/9/9 22:31:54

透视（Perspective）

二、基础语法

3D变换

综合案例演示：

相关文章：