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

CSS 3D转换

news 2025/12/16 15:00:13

在 CSS 中，除了可以对页面中的元素进行 2D 转换外，您也可以对象元素进行
3D转换（将页面看作是一个三维空间来对页面中的元素进行移动、旋转、缩放和倾斜等操作）。与 2D 转换相同，3D
转换同样不会影响周围的元素，而且可以与其它元素重叠。但是，变换后的元素任然会占用其默认位置（未变换前）的空间。

3D 转换同样需要使用 transform 属性以及一些函数来实现，例如：

  • matrix3d()：以一个 4x4 矩阵的形式指定一个 3D 转换；
  • translate3d()：指定对象的 3D 位移，第 1 个参数对应 X 轴，第 2 个参数对应 Y 轴，第 3 个参数对应 Z 轴，参数不允许省略；
  • translateZ()：指定对象在 Z 轴的平移；
  • rotate3d()：指定对象的 3D 旋转角度，其中前 3 个参数分别表示旋转的方向 X、Y、Z，第 4 个参数表示旋转的角度，参数不允许省略；
  • rotateX()：指定对象在 X 轴上的旋转角度；
  • rotateY()：指定对象在 Y 轴上的旋转角度；
  • rotateZ()：指定对象在 Z 轴上的旋转角度；
  • scale3d()：指定对象的 3D 缩放，第 1 个参数对应 X 轴，第 2 个参数对应 Y 轴，第 3 个参数对应 Z 轴，参数不允许省略；
  • scaleZ()：指定对象的 Z 轴缩放；
  • perspective()：指定透视距离。

1. translate3d()

translate3d() 函数用于移动元素在 3D
空间中的位置，这种变换的特点是通过三维矢量坐标来定义元素在每个方向上（X轴、Y轴、Z轴）的偏移量。函数的语法格式如下：

translate3d(tx, ty, tz)

参数说明如下：

  • tx：表示元素在水平方向（X 轴）移动的距离；
  • ty：表示元素的垂直方向（Z 轴）移动的距离；
  • tz：表示元素在 Z 轴移动的距离，该参数不能使用百分比值。

【示例】使用 translate3d() 函数设置元素在三维空间中的位置：

<!DOCTYPE html><html><head><style>div {width: 100px;height: 100px;background-color: #CCC;}p {transform: translate3d(25px, 25px, 50px);border: 1px solid red;}</style></head><body><div><p>translate3d(25px, 25px, 50px);</p></div></body></html>

运行结果如下图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：translate3d() 函数演示

3D 转换使用的是三维坐标系，但是沿 Z轴方向的移动并不能很明显的显现出来，因为我们往往会将网页看作是一个二维的平面，并没有深度。您可以使用
perspective 和 perspective-origin 属性来为元素添加深度感，即 Z 轴越高的元素显示的越大，反之则越小。

2. translateZ()

函数 translateZ() 用来沿三维坐标系的 Z 轴来移动元素，函数的语法格式如下：

translateZ(tz);

其中参数 tz 用来设置元素在 Z轴上移动的距离。

提示：translateZ(tz); 相当于 translate3d(0, 0, tz); 的简写形式。

【示例】使用 translateZ() 属性设置元素沿 Z轴移动的距离：

<!DOCTYPE html><html><head><style>div {width: 100px;height: 100px;perspective:150;perspective-origin: 10% 10%;-webkit-perspective:150;/*兼容 Safari and Chrome */-webkit-perspective-origin: 10% 10%;/*兼容 Safari and Chrome */background-color: #CCC;}p {transform: translateZ(30px);border: 1px solid red;background-color: yellow;}</style></head><body><div><p>translateZ(30px);</p></div></body></html>

运行结果如下图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：translateZ() 函数演示

3. rotate3d()

rotate3d() 函数用来设置元素沿 X轴、Y轴或 Z轴方向旋转的角度，该函数只会使元素按照固定的轴旋转，不会使元素变形。rotate3d()
函数的语法格式如下：

rotate3d(x, y, z, a)

参数说明如下：

  • x：设置旋转轴的 X轴坐标；
  • y：设置旋转轴的 Y轴坐标；
  • z：设置旋转轴的 Z轴坐标；
  • a：设置元素旋转的角度，正角度表示顺时针旋转，负角度表示逆时针旋转。

【示例】使用 rotate3d() 函数来旋转元素：

<!DOCTYPE html><html><head><style>div {width: 100px;height: 100px;perspective:150;perspective-origin: 10% 10%;-webkit-perspective:150;-webkit-perspective-origin: 10% 10%;border: 3px solid black;margin: 10px 0px 0px 10px;}.transform {background-color: red;border: none;transform: rotate3d(0, 1, 2, 40deg);}</style></head><body><div><div class="transform">rotate3d(0, 1, 2, 40deg);</div></div></body></html>

运行结果如下图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：rotate3d() 函数演示

除了 rotate3d() 函数外，CSS 中还提供了 rotateX()（沿 X 轴旋转元素）、rotateY() （沿 Y 轴旋转元素）和
rotateZ()（沿 Z 轴旋转元素）三个函数来按照不同的坐标轴旋转元素。rotateX()、rotateY()、rotateZ() 函数的语法格式如下：

rotateX(a) /* 等同于 rotate3D(1, 0, 0, a); /
rotateY(a) / 等同于 rotate3D(0, 1, 0, a); /
rotateZ(a) / 等同于 rotate3D(0, 0, 1, a); */

4. scale3d()

scale3d() 函数可以改变元素的大小（缩放），函数的语法格式如下：

scale3d(sx, sy, sz)

参数说明如下：

  • sx：表示元素在 X 轴方向的缩放比例；
  • sy：表示元素在 Y 轴方向的缩放比例；
  • sz：表示元素在 Z 轴方向的缩放比例。

【示例】使用 scale3d() 函数来缩放指定元素：

<!DOCTYPE html><html><head><style>div {width: 100px;height: 100px;perspective:150;perspective-origin: 10% 10%;-webkit-perspective:150;-webkit-perspective-origin: 10% 10%;border: 3px solid black;margin: 10px 0px 0px 10px;}.transform {background-color: red;border: none;transform: scale3d(1, 1, 1.5) rotate3d(1, 0, 0, 60deg);}</style></head><body><div><div class="transform">scale3d(1, 1, 1.5) rotate3d(1, 0, 0, 60deg);</div></div></body></html>

运行结果如下图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：scale3d() 函数演示

提示：当 scale3d() 函数的参数数值超出 [-1，1] 范围时，将在对应的方向上放大元素；当参数值在 [-1，1]
范围内时，将在当前方向上缩小元素；当参数值等于 1 时，则不会改变元素的大小。

除了 scale3d() 函数外，CSS 中还提供了 scaleX()（沿 X 轴缩放元素）、scaleY() （沿 Y 轴缩放元素）和
scaleZ()（沿 Z 轴缩放元素）三个函数来按照不同的坐标轴缩放元素。scaleX()、scaleY()、scaleZ() 函数的语法格式如下：

scaleX(sx) /* 等同于 scale(sx, 1); 和 scale3d(sx, 1, 1); /
scaleY(sy) / 等同于 scale(1, sy); 和 scale3d(1, sy, 1); /
scaleZ(sz) / 等同于 scale3d(1, 1, sz); */

5. matrix3d()

matrix3d() 函数与前面我们学习的 matrix() 函数非常相似，不过 matrix3d() 函数可以使用一个 4 × 4
的矩阵来描述一个三维（3D）转换。通过 matrix3d() 函数可以一次执行所有的 3D转换操作，函数的语法格式如下：

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

参数说明如下：

  • a1、b1、c1、d1、a2、b2、c2、d2、a3、b3、c3、d3、d4：用来描述各种 3D 转换；
  • a4、b4、c4：表示元素变换的量。

【示例】使用 matrix3d() 函数来定义 3D转换：

<!DOCTYPE html><html><head><style>div {width: 100px;height: 100px;perspective:150;perspective-origin: 10% 10%;-webkit-perspective:150;-webkit-perspective-origin: 10% 10%;border: 3px solid black;margin: 10px 0px 0px 10px;}.transform {background-color: red;border: none;transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);}</style></head><body><div><div class="transform">matrix3d()</div></div></body></html>

运行结果如下图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：matrix3d() 函数演示

原文地址CSS 3D转换

相关文章：

CSS 3D转换

在 CSS 中&#xff0c;除了可以对页面中的元素进行 2D 转换外&#xff0c;您也可以对象元素进行 3D转换&#xff08;将页面看作是一个三维空间来对页面中的元素进行移动、旋转、缩放和倾斜等操作&#xff09;。与 2D 转换相同&#xff0c;3D 转换同样不会影响周围的元素&#x…...

编程日记 2024/10/12 11:49:46

51单片机数码管循环显示0~f

原理图&#xff1a; #include <reg52.h>sbit dulaP2^6;//段选信号 sbit welaP2^7;//位选信号unsigned char num;//数码管显示的数字0~funsigned char code table[]{ 0x3f,0x06,0x5b,0x4f, 0x66,0x6d,0x7d,0x07, 0x7f,0x6f,0x77,0x7c, 0x39,0x5e,0x79,0x71};//定义数码管显…...

编程日记 2024/10/12 11:45:42

【编程进阶知识】Java NIO：掌握高效的I/O多路复用技术

Java NIO&#xff1a;掌握高效的I/O多路复用技术 摘要&#xff1a; 本文将带你深入了解Java NIO&#xff08;New I/O&#xff09;中的Selector类&#xff0c;探索如何利用它实现高效的I/O多路复用&#xff0c;类似于Linux中的select和epoll系统调用。文章将提供详细的代码示例…...

编程日记 2024/10/12 11:33:28

vscode创建flutter项目，运行flutter项目

打开View&#xff08;查看&#xff09; > Command Palette...&#xff08;命令面板&#xff09;。 可以按下 Ctrl / Cmd Shift P 输入 flutter 选择Flutter: New Project 命令 按下 Enter 。选择Application 选择项目地址 输入项目名称 。按下 Enter 等待项目初始化完成 …...

编程日记 2024/10/12 11:31:26

STM32之CAN外设

相信大家在学习STM32系列的单片机时&#xff0c;在翻阅芯片的数据手册时&#xff0c;都会看到这么一个寄存器外设——CAN外设寄存器。那么&#xff0c;大家知道这个外设的工作原理以及该如何使用吗&#xff1f;这节的内容将会详细介绍STM32上的CAN外设&#xff0c;文章结尾附有…...

编程日记 2024/10/12 11:27:21

【阅读笔记】水果轻微损伤的无损检测技术应用

一、水果轻微损伤检测技术以及应用 无损检测技术顾名思义就是指在不破坏水果样品完整性的情况下对样品进行品质鉴定。目前比较常用的农产品水果类无损检测法有&#xff1a;基于红外热成像、机器视觉技术的图像处理方法、光谱检测技术、介电特性技术检测法等。 1.1 基于红外热…...

编程日记 2024/10/12 11:25:20

忘记7-zip密码，如何解压文件？

7z压缩包设置了密码&#xff0c;解压的时候就需要输入正确对密码才能顺利解压出文件&#xff0c;正常当我们解压文件或者删除密码的时候&#xff0c;虽然方法多&#xff0c;但是都需要输入正确的密码才能完成。忘记密码就无法进行操作。 那么&#xff0c;忘记了7z压缩包的密码…...

编程日记 2024/10/12 11:24:18

SpringBoot基础（一）

1.SpringBoot简介 Spring Boot是Spring社区发布的一个开源项目&#xff0c;旨在帮助开发者快速并且更简单的构建项目。它 使用习惯优于配置的理念让你的项目快速运行起来&#xff0c;使用Spring Boot很容易创建一个独立运行 &#xff08;运行jar&#xff0c;内置Servlet容器&am…...

编程日记 2024/10/12 11:21:15

Java智能匹配灵活用工高效人力资源管理系统小程序源码

智能匹配灵活用工高效人力资源管理系统 &#x1f4bc;&#x1f680; &#x1f680; 开篇&#xff1a;职场新风尚&#xff0c;智能匹配引领变革 在这个瞬息万变的时代&#xff0c;职场也在经历着前所未有的变革。传统的用工模式已难以满足现代企业的需求&#xff0c;而“智能匹…...

编程日记 2024/10/12 11:20:13

openpdf

1、简介 2、示例 2.1 引入依赖 <dependency><groupId>com.github.librepdf</groupId><artifactId>openpdf</artifactId><version>1.3.34</version></dependency><dependency><groupId>com.github.librepdf</…...

编程日记 2024/10/12 11:17:07

C#垃圾回收机制详解

本文详解C#垃圾回收机制。 目录 一、C#垃圾收集器定义 二、C#中的垃圾收集器特点 三、垃圾回收触发条件 四、常见的内存泄漏情况 五、高性能应用程序的垃圾回收策略 六、最佳实践和建议 七、实例 一、C#垃圾收集器定义 int、string变量，这些数据都存储在内存中，如果…...

编程日记 2024/10/12 11:16:06

身份证二要素核验操作指南

身份证二要素核验主要涉及验证身份证上的姓名和身份证号码这两个关键信息&#xff0c;以下是详细的操作指南&#xff1a; 一、核验流程 输入信息&#xff1a;用户在客户端&#xff08;如APP、网站等&#xff09;输入自己的姓名和身份证号码。 信息加密与传输&#xff1a;客户端…...

编程日记 2024/10/12 11:14:04

量子数字签名概述

我们都知道&#xff0c;基于量子力学原理研究密钥生成和使用的学科称为量子密码学。其内容包括了量子密钥分发、量子秘密共享、量子指纹识别、量子比特承诺、量子货币、秘密通信扩展量子密钥、量子安全计算、量子数字签名、量子隐性传态等。虽然各种技术发展的状态不同&#xf…...

编程日记 2024/10/12 11:10:58

算法题——合并 k 个升序的链表

题目描述&#xff1a; 合并 k 个升序的链表并将结果作为一个升序的链表返回其头节点。 数据范围&#xff1a;节点总数 0≤n≤50000≤n≤5000&#xff0c;每个节点的val满足 ∣val∣<1000∣val∣<1000 要求&#xff1a;时间复杂度 O(nlogn) 一、常见解法 &#xff08…...

编程日记 2024/10/12 11:09:57

智能制造与精益制造的模型搭建

现行制造模式分析I-痛点改善思路-管控省优四化推行...

编程日记 2024/10/12 11:07:54

快速生成生产级Go应用的利器——Cgapp

简介 CGAPP是一个强大的命令行工具&#xff0c;开发者通过简单的命令就可以快速搭建起一个完整的Go项目框架。这个框架不仅包括后端服务&#xff0c;还可以集成前端代码和数据库配置&#xff0c;大大简化了项目的初始化过程。 安装 安装CGAPP的过程非常简单。首先&#xff0…...

编程日记 2024/10/12 11:06:53

MySQL基本语法、高级语法知识总结以及常用语法案例

MySQL基本语法总结 MySQL是一种广泛使用的关系型数据库管理系统&#xff0c;其基本语法涵盖了数据库和数据表的创建、查询、修改和删除等操作。 一、数据库操作 创建数据库&#xff08;CREATE DATABASE&#xff09; 语法&#xff1a;CREATE DATABASE [IF NOT EXISTS] databa…...

编程日记 2024/10/12 11:05:52

单片机（学习）2024.10.11

目录 按键 按键原理 按键消抖 1.延时消抖 2.抬手检测 通信 1.通信是什么 2.电平信号和差分信号 3.通信的分类 (1)时钟信号划分 同步通信 异步通信 (2)通信方式划分 串行通信 并行通信 (3)通信方向划分 单工 半双工 全双工 4.USART和UART&#xff08;串口通信&a…...

编程日记 2024/10/12 11:02:49

Java创建型模式（二）——工厂模式（简单工厂模式、工厂方法模式、抽象工厂模式、工厂模式扩展等完整详解，附有代码——案例）

文章目录 五.工厂模式5.1 概述5.2简单工厂模式5.2.1 概述5.2.2 结构5.2.3 实现5.2.4 优缺点5.2.5 扩展—静态工厂 5.3 工厂方法模式5.3.1概述5.3.2 结构5.3.3 实现5.3.4 优缺点 5.4 抽象工厂模式5.4.1 概述5.4.2 结构5.4.3 实现5.4.4 优缺点5.4.5 使用场景 5.5 工厂模式扩展 五…...

编程日记 2024/10/12 10:59:46

C++学习，容器类 ＜set＞

C 标准库中的 <set> 是一个关联容器&#xff0c;它存储了一组唯一的元素&#xff0c;并按照一定的顺序进行排序。<set> 提供了高效的元素查找、插入和删除操作。它是基于红黑树实现的&#xff0c;因此具有对数时间复杂度的查找、插入和删除性能。 声明集合&#x…...

编程日记 2024/10/12 10:58:45

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/9/23 15:13:40

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/12/16 5:34:26

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/12/12 19:38:31

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/12/8 23:40:38

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/9/30 16:13:37

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/12/9 1:32:01

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2025/12/13 0:29:47

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

编程新知 2025/12/8 16:40:25

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2025/12/3 23:08:18

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46