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

H5 + C3基础（八）（3d转换 位移 旋转）

news 2025/9/13 22:26:40

3d转换 位移 & 旋转

    • 定义
    • 位移
      • 透视 perspective
      • 透视和Z轴使用场景
    • 旋转
      • 子元素开启3d视图
      • 示例
    • 小结

定义

3d转换在2d转换中增加了一个z轴，垂直于屏幕，向外为正，向内为负。

位移

在2d位移的基础上增加了

  • translateZ(z);
    在Z轴上的位移

  • translate3d(x,y,z);
    同时定义在3个轴上的位移

透视 perspective

3D效果通过透视距离（视距）和z轴模拟人眼到盒子的距离

视距越大，隔得越远，物体越小；视距越大，隔得越近，物体越大；
Z轴越大，隔得越近，物体越大，Z轴越小，隔得越远，物体越小。

透视距离需加载模拟3d的元素的父盒子上，通过父盒子的视角去模拟3d近大远小的效果。

透视距离需 >= z轴的值，否则相当于物体跑进我们眼睛里面了。

透视和z轴都可以调整最终观察到的物体大小

透视和Z轴使用场景

透视（视距）：用于设置眼睛到屏幕的距离，用于在父盒子上设置统一的视距。

Z轴：用于给盒子内不同元素，单独设置盒子距离屏幕的Z轴的值，并体现出不同的大小。

旋转

和位移一样，3d旋转在2d旋转的基础之上，加了z轴的旋转。
同样要借助 基于父盒子的视距模拟3d效果。
对于旋转的的方向：站在坐标轴正方向，顺势针方向即为正向旋转，逆时针即为负向旋转。

新增两个旋转属性

  • rotateZ(deg)；沿着z轴旋转指定度数
  • rotate3d(x, y, z, deg)；沿着自定义轴线旋转

子元素开启3d视图

transform-style：flat（默认，不开启）| preserve-3d 开启3d视图

同样这个属性是给到父盒子的。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>子盒子保持3d视图</title><style>.box {position: relative;width: 500px;height: 200px;background-color: #ff6700;margin: 100px auto;perspective: 500px;transform-style: preserve-3d;}.box:hover {transform: rotateY(70deg);}.box div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #ee20ee;}.box div:last-child {background-color: green;transform: rotateX(45deg);}body {perspective: 500px;}</style></head><body><div class="box"><div></div><div></div></div></body>
</html>

示例

  1. 盒子前后面反转
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>前后翻转盒子</title><style>.box {position: relative;width: 300px;height: 300px;margin: 100px auto;transition: all .2s;perspective: 300px;transform-style: preserve-3d;}.box:hover {transform: rotateY(180deg);}.box > * {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 150px;font-size: 20px;text-align: center;line-height: 300px;backface-visibility: hidden;}.box .front {background-color: #ee20ee;z-index: 1;}.box .back {background-color: #ff5000;transform: rotateY(180deg);}body{perspective: 300px;transform-style: preserve-3d;}</style></head><body><div class="box"><div class="front">今天要上学</div><div class="back">作业没写完</div></div></body>
</html>
  1. 3d菜单
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>3d菜单</title><style>* {margin: 0;padding: 0;}ul {margin: 100px auto;width: 200px;height: 100px;}ul li {float: left;margin: 0 5px;width: 100%;height: 100%;list-style: none;perspective: 500px;}div {width: 100%;height: 100%;text-align: center;line-height: 100px;}.box {position: relative;transition: all 0.6s;transform-style: preserve-3d;background-color: #ff5000;}.front {position: absolute;z-index: 1;top: 0;left: 0;background-color: green;transform: translateZ(50px)}.bottom {position: absolute;top: 0;left: 0;transform: translateY(50px) rotateX(-90deg); /*translateZ(100px)*/background-color: #ee20ee;}.box:hover {transform: rotateX(90deg);}body {perspective: 500px;transform-style: preserve-3d;}</style></head><body><ul><li><div class="box"><div class="front">正面</div><div class="bottom">底面</div></div></li></ul></body>
</html>
  1. 围绕y轴旋转
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>围绕一个y轴旋转</title><style>body {perspective: 1000px;}.box {position: relative;margin: 200px auto;width: 200px;height: 200px;text-align: center;transform-style: preserve-3d;animation: three_rotate 10s infinite linear;}.box:hover {animation-play-state: paused;}img {position: absolute;top: 0;left: 0;width: 100%;}@keyframes three_rotate {0% {transform: rotateY(0);}100% {transform: rotateY(360deg);}}.box img:nth-child(1) {transform: translateZ(300px);}.box img:nth-child(2) {transform: rotateY(60deg) translateZ(300px);}.box img:nth-child(3) {transform: rotateY(120deg) translateZ(300px);}.box img:nth-child(4) {transform: rotateY(180deg) translateZ(300px);}.box img:nth-child(5) {transform: rotateY(240deg) translateZ(300px);}.box img:nth-child(6) {transform: rotateY(300deg) translateZ(300px);}</style>
</head>
<body>
<!--动态转动都是围绕 .box 这个盒子的，里面的图片都是事先摆在相应的位置，相当于是附属在这个盒子上随着.box盒子的转动而转动-->
<div class="box"><img src="../../img/抢购封面.jpg"><img src="../../img/抢购封面.jpg"><img src="../../img/抢购封面.jpg"><img src="../../img/抢购封面.jpg"><img src="../../img/抢购封面.jpg"><img src="../../img/抢购封面.jpg">
</div>
</body>
</html>

小结

3d变换注意两个属性：

  • perspective: 300px;
    开启3d视图，这个值必须比Z轴的值大，且设置在要表现3d效果的盒子的父盒子上
    作用：让其子元素的3d属性呈现出立体的效果，有近大远小的视觉

  • transform-style: preserve-3d;
    保留子盒子3d效果，默认当父盒子开启3d视图，并且发生3d转换时，子盒子会变成2d，需要给父盒子加上此属性
    作用：使当前盒子开启在开启3d属性后，其子元素依然保留已开启的3d效果

相关文章：

H5 + C3基础（八）（3d转换 位移 旋转）

3d转换 位移 & 旋转 定义位移透视 perspective透视和Z轴使用场景 旋转子元素开启3d视图示例 小结 定义 3d转换在2d转换中增加了一个z轴&#xff0c;垂直于屏幕&#xff0c;向外为正&#xff0c;向内为负。 位移 在2d位移的基础上增加了 translateZ(z); 在Z轴上的位移 t…...

编程日记 2023/9/1 19:16:57

PyQt6 GUI界面设计和Nuitka包生成exe程序（全笔记）

PyQt6 GUI界面设计和Nuitka包，生成exe程序全笔记 目录一、PyQt6包安装1.1 进行环境配置和安装1.2 检查包是否安装成功。1.3 运行desinger.exe二、GUI界面设计，写程序，并能运行成功。三、Nuitka打包生成exe程序3.1 做Nuitka安装准备工作（1）安装C编译器，设置环境变量3.2 配…...

编程日记 2023/9/1 19:15:56

学习网络编程No.5【TCP套接字通信】

引言&#xff1a; 北京时间&#xff1a;2023/8/25/15:52&#xff0c;昨天刚把耗时3天左右的文章更新&#xff0c;充分说明我们这几天并不是在摆烂中度过&#xff0c;而是在为了更文不懈奋斗&#xff0c;历时这么多天主要是因为该部分知识比较陌生&#xff0c;所以需要我们花费…...

编程日记 2023/9/1 19:14:55

常用的时间段的时间戳

获取 昨天这个时间的时间戳 Calendar calendar Calendar.getInstance(); //当前时间calendar.add(Calendar.DAY_OF_YEAR,-1); Long dd calendar.getTime().getTime()/1000;System.out.println(dd);计算今天0点的时间戳 Long time System.currentTimeMillis(); //当前…...

编程日记 2023/9/1 19:13:54

博客系统后台控制层接口编写

BlogColumnCon CrossOrigin RequestMapping("/back/blogColumn") RestController public class BlogColumnCon {Autowiredprivate BlogColumnService blogColumnService;/*** 新增** param blogColumn* return*/PostMapping("/add")public BaseResult add…...

编程日记 2023/9/1 19:12:53

生成 MySQL 删除索引、创建索引、分析表的 SQL 语句

目录 1. 生成删除索引 SQL 语句 2. 生成创建索引的 SQL 语句 3. 生成分析表的 SQL 语句 1. 生成删除索引 SQL 语句 mysql -uwxy -p12345 -S /data/18253/mysqldata/mysql.sock -e " select concat(alter table \,table_schema,\.\,table_name,\ ,drop_index,;)from ( …...

编程日记 2023/9/1 19:11:50

mongodb建用户

玛德折腾了2个小时&#xff0c;、mongodb 建用户。艹 [rootk8-master mongodb]# cat docker-compose.yaml version: 2 services: mongodb: container_name: mongodb_2.0 image: mongo:4.4 restart: always environment: TZ: Asia/Shanghai MONGO_INITDB_ROOT_USERNAME: admin M…...

编程日记 2023/9/1 19:10:49

无门槛访问ChatGPT升级版-数据指北AI

大家好&#xff0c;我是脚丫先生 (o^^o) 给小伙伴们介绍ChatGPT升级版不需要任何门槛&#xff0c;不需要单独搞账号&#xff0c;只要邮箱登录的方式&#xff0c;即可访问平台&#xff0c;以用户体验为首要&#xff0c;让所有人都能无门槛的使用目前市面上最强大的AI智能聊天&a…...

编程日记 2023/9/1 19:09:48

前端需要学习哪些技术？

前端工程师岗位缺口一直很大&#xff0c;符合岗位要求的人越来越少&#xff0c;所以学习前端的同学要注意&#xff0c;一定要把技能学到扎实&#xff0c;做有含金量的项目&#xff0c;这样在找工作的时候展现更大的优势。 缺人才&#xff0c;又薪资高&#xff0c;那么怎样才能…...

编程日记 2023/9/1 19:08:47

详解排序算法(附带Java/Python/Js源码)

冒泡算法 依次比较两个相邻的子元素&#xff0c;如果他们的顺序错误就把他们交换过来&#xff0c;重复地进行此过程直到没有相邻元素需要交换&#xff0c;即完成整个冒泡&#xff0c;时间复杂度。 比较相邻的元素。如果第一个比第二个大&#xff0c;就交换它们两个&#xff1b;…...

编程日记 2023/9/1 19:07:45

手写Mybatis：第8章-把反射用到出神入化

文章目录 一、目标&#xff1a;元对象反射类二、设计&#xff1a;元对象反射类三、实现&#xff1a;元对象反射类3.1 工程结构3.2 元对象反射类关系图3.3 反射调用者3.3.1 统一调用者接口3.3.2 方法调用者3.3.3 getter 调用者3.3.4 setter 调用者 3.4 属性命名和分解标记3.4.1 …...

编程日记 2023/9/1 19:06:45

基于AI智能分析网关EasyCVR视频汇聚平台关于能源行业一体化监控平台可实施应用方案

随着数字经济时代的到来&#xff0c;实体经济和数字技术深度融合已成为经济发展的主流思路。传统能源行业在运营管理方面也迎来了新的考验和机遇。许多大型能源企业已开始抓住机遇&#xff0c;逐步将视频监控、云计算、大数据和人工智能技术广泛应用于生产、维护、运输、配送等…...

编程日记 2023/9/1 19:05:43

《Flink学习笔记》——第四章 Flink运行时架构

4.1 系统架构 Flink运行时架构 Flink 运行时由两种类型的进程组成&#xff1a;一个 JobManager 和一个或者多个 TaskManager。 1、作业管理器&#xff08;JobManager&#xff09; JobManager是一个Flink集群中任务管理和调度的核心&#xff0c;是控制应用执行的主进程。也就…...

编程日记 2023/9/1 19:04:42

vue3使用Elementplus 动态显示菜单icon不生效

1.问题描述 菜单icon由后端提供&#xff0c;直接用的字符串返回&#xff0c;前端使用遍历显示&#xff0c;发现icon不会显示 {id: 8, path:/userManagement, authName: "用户管理", icon: User, rights:[view]}, <el-menu-item :index"menu.path" v-f…...

编程日记 2023/9/1 19:03:40

升级iOS17后iPhone无法连接App Store怎么办？

最近很多用户反馈&#xff0c;升级最新iOS 17系统后打开App Store提示"无法连接"&#xff0c;无法正常打开下载APP。 为什么升级后无法连接到App Store&#xff1f;可能是以下问题导致&#xff1a; 1.网络问题导致App Store无法正常打开 2.网络设置问题 3.App Sto…...

编程日记 2023/9/1 19:02:38

antd日期选择禁止

1、年月日——日期禁止当天之前的&#xff0c;不包括当天的(带有时间的除外) 2、年月日——日期禁用当天之前的(包括当天的) 部分代码如下:...

编程日记 2023/9/1 19:01:37

数据结构--树4.1

目录 一、树的定义 二、结点的分类 三、结点间的关系 四、结点的层次 五、树的存储结构 一、树的定义 树&#xff08;Tree&#xff09;是n&#xff08;n>0&#xff09;个结点的有限集。当n0时称为空树&#xff0c;在任意一个非空树中&#xff1a; ——有且仅有一个特定的…...

编程日记 2023/9/1 19:00:32

webpack（二）webpack介绍与基础配置

什么是webpack webpack最初的目标是实现前端项目模块化&#xff0c;旨在更高效的管理和维护项目中的每一个资源。 可以看做是模块打包机&#xff0c;分析你的项目结构&#xff0c;找到javascript模块以及其它一些浏览器不能直接运行的拓展语言&#xff08;Scss、TypeScript等&…...

编程日记 2023/9/1 18:59:31

RabbitMQ | 在ubuntu中使用apt-get安装高版本RabbitMQ

目录 一、官方脚本 二、彻底卸载 三、重新安装 1.安装高版本Erlang 2.安装RabbitMQ 一、官方脚本 直接使用apt安装的rabbitmq版本较低&#xff0c;甚至可能无法使用死信队列等插件。首先提供一个 官方 的安装脚本&#xff1a; #!/usr/bin/sh sudo apt-get install curl …...

编程日记 2023/9/1 18:58:30

springboot集成es 插入和查询的简单使用

第一步&#xff1a;引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId><version>2.2.5.RELEASE</version></dependency>第二步&#xff1a;…...

编程日记 2023/9/1 18:57:29

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2025/9/13 15:34:01

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/9/7 11:32:34

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/9/9 16:59:16

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2025/9/13 15:19:41

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/9/10 3:41:08

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2025/8/30 16:47:37

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/7/23 16:26:20

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/8/19 20:22:44

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2025/9/12 1:12:23

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40