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

CSS3_3D变换（七）

news 2026/2/9 1:33:03

1、CSS3_3D变换

1.1 3D空间与景深

3D空间：在父元素中将属性transform-style设置为preserve-3d开启3D空间，默认值为flat（开启2D空间）；

景深：人眼与平面的距离，产生透视效果，使得效果更加立体。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>3D变换与景深</title><style>.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;transform: rotateX(30deg);}</style>
</head><body><div class="outer"><div class="inner">示例文字</div></div>
</body></html>
1.2 透视点的位置

透视点：人眼观察的位置，在父元素中设置。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>透视点的位置</title><style>.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;/* 设置观察点的位置（在右下角观察） */perspective-origin: 500px 500px;}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;transform: rotateX(30deg);}</style>
</head><body><div class="outer"><div class="inner">示例文字</div></div>
</body></html>
1.3 3D位移
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>位移</title><style>.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;/* 设置观察点的位置（在右下角观察） *//* perspective-origin: 500px 200px; */}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;/* 设置Z轴距离,不能写百分比 *//* transform: translateZ(150px); *//* 设置在X、Y、Z轴的位移距离，可以写百分比 */transform: translate3d(12px, 50%, 3px);}</style>
</head><body><div class="outer"><div class="inner">示例文字</div></div>
</body></html>
1.4 3D旋转
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>旋转</title><style>.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;/* 设置X轴旋转角度 *//* transform: rotateX(100deg); *//* 设置Y轴旋转角度 *//* transform: rotateY(100deg); *//* 设置X、Y、Z轴旋转角度倍数 */transform: rotate3d(1, 1, 1, 30deg);}</style>
</head><body><div class="outer"><div class="inner">示例文字</div></div>
</body></html>
1.5 3D缩放
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>缩放</title><style>.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;/* 设置Z轴缩放比例，由于html元素没有厚度，则该属性调整景深，景深除以缩放的比例 */transform: scaleZ(4) rotateY(30deg);/* 设置3D缩放比例，X、Y、Z轴的缩放比例 *//* transform: scale3d(2,1,1) rotateY(30deg); */}</style>
</head><body><div class="outer"><div class="inner">示例文字</div></div>
</body></html>
1.6 3D多重变换
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>多重变换</title><style>.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;line-height: 200px;transform-origin: top 20px;transform: rotateX(60deg);}</style>
</head><body><div class="outer"><div class="inner">示例文字</div></div>
</body></html>
1.7 3D背部
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>背部</title><style>.outer {height: 200px;width: 200px;border: 1px solid black;margin: 0 auto;margin-top: 100px;/* 开启3D空间 */transform-style: preserve-3d;/* 设置景深 */perspective: 500px;}.inner {height: 200px;width: 200px;background-color: aquamarine;text-align: center;line-height: 200px;transform: rotateY(180deg);/* 设置背部不可见 */backface-visibility: hidden;}</style>
</head><body><div class="outer"><div class="inner">示例文字</div></div>
</body></html>

相关文章：

CSS3_3D变换（七）

1、CSS3_3D变换 1.1 3D空间与景深 3D空间&#xff1a;在父元素中将属性transform-style设置为preserve-3d开启3D空间&#xff0c;默认值为flat&#xff08;开启2D空间&#xff09;&#xff1b; 景深&#xff1a;人眼与平面的距离&#xff0c;产生透视效果&#xff0c;使得效果…...

编程日记 2024/11/11 22:16:32

Mesh网格

Mesh(网格) 定义&#xff1a;Mesh 是一个包含顶点、三角形、顶点法线、UV坐标、颜色和骨骼权重等数据的对象。它定义了3D模型的几何形状。 功能&#xff1a; 顶点&#xff08;Vertices&#xff09;&#xff1a;构成3D模型的点。 三角形&#xff08;Triangles&#xff09;&…...

编程日记 2024/11/11 22:11:25

LeetCode 509.斐波那契数

动态规划思想 五步骤&#xff1a; 1.确定dp[i]含义 2.递推公式 3.初始化 4.遍历顺序 5.打印dp数组 利用状态压缩&#xff0c;简化空间复杂度。在原代码中&#xff0c;dp 数组保存了所有状态&#xff0c;但实际上斐波那契数列的计算只需要前两个状态。因此&#xff0c;我们…...

编程日记 2024/11/11 22:10:24

SQL Server 数据太多如何优化

大家好&#xff0c;我是 V 哥。讲了很多数据库&#xff0c;有小伙伴说&#xff0c;SQL Server 也讲一讲啊&#xff0c;好吧&#xff0c;V 哥做个听话的门童&#xff0c;今天要聊一聊 SQL Server。 在 SQL Server 中&#xff0c;当数据量增大时&#xff0c;数据库的性能可能会受…...

编程日记 2024/11/11 22:07:20

关于word 页眉页脚的一些小问题

去掉页眉底纹&#xff1a; 对文档的段落边框和底纹进行设置&#xff0c;也是页眉横线怎么删除的一种解决方式&#xff0c;具体操作如下&#xff1a; 选中页眉中的横线文本&#xff1b; 点击【开始】选项卡&#xff0c;在【段落】组中点击【边框】按钮的下拉箭头&#xff1b; …...

编程日记 2024/11/11 22:06:18

【高等数学学习记录】连续函数的运算与初等函数的连续性

一、知识点 &#xff08;一&#xff09;连续函数的和、差、积、商的连续性 定理1 设函数 f ( x ) f(x) f(x) 和 g ( x ) g(x) g(x) 在点 x 0 x_0 x0​ 连续&#xff0c;则它们的和&#xff08;差&#xff09; f g f\pm g fg、积 f ⋅ g f\cdot g f⋅g 及商 f g \frac{f…...

编程日记 2024/11/11 22:04:16

【抖音直播间弹幕】protobuf协议分析

将Uint8Array变成 PushFrame格式&#xff0c;里面的payload就存放着弹幕消息 点进去就可以看到其定义的proto结构 headers是一个自定义类型 将测试数据保存一下&#xff0c;等下做对比 先将PushFrame的 payload 内容进行gzip解压 然后再解析为响应 可以看到里面有对应的消…...

编程日记 2024/11/11 22:03:14

Swift 开发教程系列 - 第11章：内存管理和 ARC（Automatic Reference Counting）

在 Swift 中&#xff0c;内存管理由 ARC&#xff08;自动引用计数&#xff09;机制自动处理。ARC 通过追踪和管理对象的引用计数来确保分配的内存得到有效释放。尽管 ARC 在大多数情况下能够高效地管理内存&#xff0c;但理解其工作原理仍然十分重要&#xff0c;因为不当的引用…...

编程日记 2024/11/11 22:02:13

C#中 layout的用法

在C#中&#xff0c;layout并不是一个直接用于C#语言本身的关键字或特性。然而&#xff0c;layout在与C#紧密相关的某些上下文中确实有其用途&#xff0c;特别是在涉及用户界面&#xff08;UI&#xff09;设计和数据展示时。以下是几个常见的与layout相关的用法场景&#xff1a;…...

编程日记 2024/11/11 21:59:10

【编程概念基础知识】

、编程基础 一、面向对象的三大特性 1、封装&#xff1a; 盒子、零件、按钮 隐藏对象 的内部状态&#xff0c;并且只通过对象的方法来访问数据 想象你有一个小盒子&#xff08;这个盒子就是一个类&#xff09;&#xff0c;里面装着一些零件&#xff08;这些零件就是数据&a…...

编程日记 2024/11/11 21:58:09

【React】深入理解 JSX语法

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 深入理解 JSX语法1. JSX 简介2. JSX 的基本语法2.1 基本结构2.2 与普通 JavaScr…...

编程日记 2024/11/11 21:57:08

【Linux】从零开始使用多路转接IO --- 理解EPOLL的 LT水平触发模式 与 ET边缘触发模式

当你偶尔发现语言变得无力时&#xff0c; 不妨安静下来&#xff0c; 让沉默替你发声。 --- 里则林 --- 从零开始认识多路转接 1 EPOLL优缺点2 EPOLL工作模式 1 EPOLL优缺点 poll 的优点(和 select 的缺点对应) 接口使用方便&#xff1a;虽然拆分成了三个函数&#xff0c;…...

编程日记 2024/11/11 21:55:07

QtLua

描述 QtLua 库旨在使用 Lua 脚本语言使 Qt4/Qt5 应用程序可编写脚本。它是 QtScript 模块的替代品。 QtLua 不会为 Qt 生成或使用生成的绑定代码。相反&#xff0c;它提供了有用的 C 包装器类&#xff0c;使 C 和 lua 对象都可以从 lua 和 C 访问。它利用 Qt 元对象系统将 QOb…...

编程日记 2024/11/11 21:54:05

c++-有关计数、双变量累加、半衰、阶乘、变量值互换的基础知识

C是一种非常强大和灵活的编程语言&#xff0c;它包含了许多重要的概念和技巧。在本文中&#xff0c;我们将重点讨论五个主题&#xff1a;计数、双变量累加、半衰、阶乘和变量值的互换。我们将介绍这些概念的定义、用法、题目、答案和解释&#xff0c;以帮助读者更好地理解和运用…...

编程日记 2024/11/11 21:53:04

MyBatis3-获取参数值的方式、查询功能及特殊SQL执行

目录 准备工作 获取参数值的方式&#xff08;重点&#xff09; 查询功能 查询一个实体类对象 查询一个list集合 查询单个数据 查询一条数据为map集合 查询多条数据为map集合 特殊SQL执行 模糊查询 批量删除 动态设置表名 添加功能获取自增的主键 准备工作 模块My…...

编程日记 2024/11/11 21:52:02

web——[SUCTF 2019]EasySQL1——堆叠注入

这个题主要是讲述了堆叠注入的用法&#xff0c;来复现一下 什么是堆叠注入 堆叠注入&#xff1a;将多条SQL语句放在一起&#xff0c;并用分号;隔开。 1.查看数据库的名称 查看数据库名称 1;show databases; 发现有名称为ctftraining的数据库 2.对表进行查询 1;show tabl…...

编程日记 2024/11/11 21:51:00

【Ubuntu学习】Ubuntu无法使用vim命令编辑

问题 在VMware首次安装Ubuntu&#xff0c;使用vi指令对文件进行编辑&#xff0c;按i键后无法更改文件内容。 原因 由于Ubuntu中预装的是vim-tiny&#xff0c;平时开发中需要使用vim-full。 解决方案 卸载预装vim sudo apt-get remove vim-common安装vim-full sudo apt-get …...

编程日记 2024/11/11 21:49:58

UniAPP u-popup 禁止背景滑动

增加class .NoScroll {overflow: hidden;position: fixed; }在外层div上增加该class判断条件...

编程日记 2024/11/11 21:47:55

F5全新报告揭示AI时代API安全面临严峻挑战

F5 《2024年应用策略现状报告:API安全》揭示了 API 保护中的漏洞以及对全面安全措施的迫切需求 西雅图,2024年11月11日 – F5(NASDAQ: FFIV)日前发布《2024年应用策略现状报告:API 安全》(以下简称为“报告”),揭示了跨行业API安全面临的严峻现状。该报告强调了企业API保护方面…...

编程日记 2024/11/11 21:46:54

使用C语言进行信号处理：从理论到实践的全面指南

1. 引言 在现代操作系统中&#xff0c;信号是一种进程间通信机制&#xff0c;它允许操作系统或其他进程向一个进程发送消息。信号可以用来通知进程发生了一些重要事件&#xff0c;如用户请求终止进程、硬件异常、定时器超时等。掌握信号处理技术对于开发健壮、高效的系统程序至…...

编程日记 2024/11/11 21:45:54

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2026/2/2 1:48:09

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/11/25 22:59:17

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2026/1/31 6:53:51

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2026/1/31 23:23:23

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/11/19 6:04:18

深度学习水论文：mamba＋图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

编程新知 2026/1/26 4:52:47

解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

编程新知 2026/2/3 15:45:51

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

编程新知 2026/2/4 17:42:50