CSS3_3D变换（七）
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空间：在父元素中将属性transform-style设置为preserve-3d开启3D空间，默认值为flat（开启2D空间）； 景深：人眼与平面的距离，产生透视效果，使得效果…...
Mesh网格
Mesh(网格) 定义：Mesh 是一个包含顶点、三角形、顶点法线、UV坐标、颜色和骨骼权重等数据的对象。它定义了3D模型的几何形状。 功能： 顶点（Vertices）：构成3D模型的点。 三角形（Triangles）&…...
LeetCode 509.斐波那契数
动态规划思想 五步骤： 1.确定dp[i]含义 2.递推公式 3.初始化 4.遍历顺序 5.打印dp数组 利用状态压缩，简化空间复杂度。在原代码中，dp 数组保存了所有状态，但实际上斐波那契数列的计算只需要前两个状态。因此，我们…...
SQL Server 数据太多如何优化
大家好，我是 V 哥。讲了很多数据库，有小伙伴说，SQL Server 也讲一讲啊，好吧，V 哥做个听话的门童，今天要聊一聊 SQL Server。 在 SQL Server 中，当数据量增大时，数据库的性能可能会受…...
关于word 页眉页脚的一些小问题
去掉页眉底纹： 对文档的段落边框和底纹进行设置，也是页眉横线怎么删除的一种解决方式，具体操作如下： 选中页眉中的横线文本； 点击【开始】选项卡，在【段落】组中点击【边框】按钮的下拉箭头； …...
【高等数学学习记录】连续函数的运算与初等函数的连续性
一、知识点 （一）连续函数的和、差、积、商的连续性 定理1 设函数 f ( x ) f(x) f(x) 和 g ( x ) g(x) g(x) 在点 x 0 x_0 x0 连续，则它们的和（差） f g f\pm g fg、积 f ⋅ g f\cdot g f⋅g 及商 f g \frac{f…...
【抖音直播间弹幕】protobuf协议分析
将Uint8Array变成 PushFrame格式，里面的payload就存放着弹幕消息 点进去就可以看到其定义的proto结构 headers是一个自定义类型 将测试数据保存一下，等下做对比 先将PushFrame的 payload 内容进行gzip解压 然后再解析为响应 可以看到里面有对应的消…...
Swift 开发教程系列 - 第11章：内存管理和 ARC（Automatic Reference Counting）
在 Swift 中，内存管理由 ARC（自动引用计数）机制自动处理。ARC 通过追踪和管理对象的引用计数来确保分配的内存得到有效释放。尽管 ARC 在大多数情况下能够高效地管理内存，但理解其工作原理仍然十分重要，因为不当的引用…...
C#中 layout的用法
在C#中，layout并不是一个直接用于C#语言本身的关键字或特性。然而，layout在与C#紧密相关的某些上下文中确实有其用途，特别是在涉及用户界面（UI）设计和数据展示时。以下是几个常见的与layout相关的用法场景：…...
【编程概念基础知识】
、编程基础 一、面向对象的三大特性 1、封装： 盒子、零件、按钮 隐藏对象 的内部状态，并且只通过对象的方法来访问数据 想象你有一个小盒子（这个盒子就是一个类），里面装着一些零件（这些零件就是数据&a…...
【React】深入理解 JSX语法
🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈｜ 炫酷HTML | JavaScript基础 💫个人格言: "如无必要，勿增实体" 文章目录 深入理解 JSX语法1. JSX 简介2. JSX 的基本语法2.1 基本结构2.2 与普通 JavaScr…...
【Linux】从零开始使用多路转接IO --- 理解EPOLL的 LT水平触发模式 与 ET边缘触发模式
当你偶尔发现语言变得无力时， 不妨安静下来， 让沉默替你发声。 --- 里则林 --- 从零开始认识多路转接 1 EPOLL优缺点2 EPOLL工作模式 1 EPOLL优缺点 poll 的优点(和 select 的缺点对应) 接口使用方便：虽然拆分成了三个函数，…...
QtLua
描述 QtLua 库旨在使用 Lua 脚本语言使 Qt4/Qt5 应用程序可编写脚本。它是 QtScript 模块的替代品。 QtLua 不会为 Qt 生成或使用生成的绑定代码。相反，它提供了有用的 C 包装器类，使 C 和 lua 对象都可以从 lua 和 C 访问。它利用 Qt 元对象系统将 QOb…...
c++-有关计数、双变量累加、半衰、阶乘、变量值互换的基础知识
C是一种非常强大和灵活的编程语言，它包含了许多重要的概念和技巧。在本文中，我们将重点讨论五个主题：计数、双变量累加、半衰、阶乘和变量值的互换。我们将介绍这些概念的定义、用法、题目、答案和解释，以帮助读者更好地理解和运用…...
MyBatis3-获取参数值的方式、查询功能及特殊SQL执行
目录 准备工作 获取参数值的方式（重点） 查询功能 查询一个实体类对象 查询一个list集合 查询单个数据 查询一条数据为map集合 查询多条数据为map集合 特殊SQL执行 模糊查询 批量删除 动态设置表名 添加功能获取自增的主键 准备工作 模块My…...
web——[SUCTF 2019]EasySQL1——堆叠注入
这个题主要是讲述了堆叠注入的用法，来复现一下 什么是堆叠注入 堆叠注入：将多条SQL语句放在一起，并用分号;隔开。 1.查看数据库的名称 查看数据库名称 1;show databases; 发现有名称为ctftraining的数据库 2.对表进行查询 1;show tabl…...
【Ubuntu学习】Ubuntu无法使用vim命令编辑
问题 在VMware首次安装Ubuntu，使用vi指令对文件进行编辑，按i键后无法更改文件内容。 原因 由于Ubuntu中预装的是vim-tiny，平时开发中需要使用vim-full。 解决方案 卸载预装vim sudo apt-get remove vim-common安装vim-full sudo apt-get …...
UniAPP u-popup 禁止背景滑动
增加class .NoScroll {overflow: hidden;position: fixed; }在外层div上增加该class判断条件...
F5全新报告揭示AI时代API安全面临严峻挑战
F5 《2024年应用策略现状报告:API安全》揭示了 API 保护中的漏洞以及对全面安全措施的迫切需求 西雅图,2024年11月11日 – F5(NASDAQ: FFIV)日前发布《2024年应用策略现状报告:API 安全》(以下简称为“报告”),揭示了跨行业API安全面临的严峻现状。该报告强调了企业API保护方面…...
使用C语言进行信号处理：从理论到实践的全面指南
1. 引言 在现代操作系统中，信号是一种进程间通信机制，它允许操作系统或其他进程向一个进程发送消息。信号可以用来通知进程发生了一些重要事件，如用户请求终止进程、硬件异常、定时器超时等。掌握信号处理技术对于开发健壮、高效的系统程序至…...
保姆级教程：用SolidWorks和PCL把装配体转成PCD点云（附完整命令）
从SolidWorks装配体到PCL点云的完整转换指南 在工业设计、逆向工程和三维视觉处理领域，将CAD模型转换为点云数据是一个常见但容易出错的过程。许多工程师和研究人员在使用SolidWorks完成设计后，需要将装配体转换为点云格式（如PCD）…...
Dlib零基础避坑指南：Windows Python环境一键部署实战
Dlib零基础避坑指南：Windows Python环境一键部署实战 【免费下载链接】Dlib_Windows_Python3.x Dlib compiled binary (.whl) for Python 3.7-3.11 and Windows x64 项目地址: https://gitcode.com/gh_mirrors/dl/Dlib_Windows_Python3.x 副标题：…...
同架构大数据量HGDB到HGDB数据迁移
文章目录环境文档用途详细信息环境 系统平台：Linux x86-64 Red Hat Enterprise Linux 7,银河麒麟 （X86_64） 版本：4.5.8 文档用途 本文介绍同架构大数据量情况下，为了减少停机时间，先搭建流复制同步数据&…...
BepInEx游戏插件加载器完全指南：从入门到精通Unity游戏扩展工具
BepInEx游戏插件加载器完全指南：从入门到精通Unity游戏扩展工具 【免费下载链接】BepInEx Unity / XNA game patcher and plugin framework 项目地址: https://gitcode.com/GitHub_Trending/be/BepInEx 如何用BepInEx解锁游戏自定义功能？解决玩家…...
新手避坑指南：用Python+ROS搞定AVP项目中的.bag数据读取与深度图转点云
从零开始处理AVP项目中的.bag数据：深度图与点云实战解析 停车场里75个RealSense相机同时工作，产生的.bag数据像一座未经开采的金矿——但当你第一次打开这些文件时，可能会感到无从下手。作为刚接触ROS和点云处理的新手，我清楚地记…...
为什么你的Mojo-Python FFI在M1芯片上必崩？苹果Silicon专属ABI陷阱与跨架构符号绑定修复指南（含Clang插件源码）
第一章：为什么你的Mojo-Python FFI在M1芯片上必崩？Mojo-Python FFI（Foreign Function Interface）在 Apple M1 及后续 ARM64 架构芯片上崩溃，根源并非配置疏忽，而是底层 ABI 不兼容与运行时符号解析机制的双…...
用了Trae写业务系统，为什么上线前总要手动补依赖和权限？
发版前夜，测试跑穿才发现前端字段跟后端对不上，改到凌晨三点才勉强收口。这种场景在引入 AI Coding 后并不罕见，不少团队用了 Trae 写业务系统，速度是上去了，可上线前总得花半天专门查安全漏洞和依赖冲突。大家原指望 …...
交易数据一致性保障：大数据环境下的挑战
交易数据一致性保障：大数据环境下的挑战 1. 引入与连接：数字世界的"货币守卫" 想象一下：当你在电商平台下单支付后，银行显示扣款成功，但商家却显示支付失败；或者在股票交易中，你看到的股价与实际成交价格存在差异。这些看似微小的数据不一致，可能导致企业声…...
LazyVim终极指南：如何快速打造你的Neovim梦幻开发环境
LazyVim终极指南：如何快速打造你的Neovim梦幻开发环境 【免费下载链接】LazyVim Neovim懒人配置。 项目地址: https://gitcode.com/GitHub_Trending/la/LazyVim 你是否曾经因为Neovim配置的复杂性而望而却步？是否尝试过各种配置方案却始终找不到那…...
AR.js终极指南：在Web浏览器中实现高效增强现实的完整解决方案
AR.js终极指南：在Web浏览器中实现高效增强现实的完整解决方案 【免费下载链接】AR.js Image tracking, Location Based AR, Marker tracking. All on the Web. 项目地址: https://gitcode.com/gh_mirrors/arj/AR.js AR.js是一个轻量级JavaScript库࿰…...