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

CSS 3D转换

news 2025/10/19 2:50:29

在 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

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/10/15 11:54:32

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/9/11 12:54:42

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/10/12 22:33:46

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2025/10/16 10:27:01

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/9/17 19:16:20

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/17 21:39:04

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2025/8/17 10:25:39

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/9/30 5:23:30

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2025/9/17 22:26:02