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

CSS 3D转换

news 文章来源：https://blog.csdn.net/2401_82561004/article/details/142766187 2025/5/10 15:59:24

在 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

Cisco Catalyst 9000 交换产品系列 IOS XE 17.15.1 发布下载，新增功能概览

Cisco Catalyst 9000 Series Switches, IOS XE Release 17.15.1 ED 思科 Catalyst 9000 交换产品系列 IOS XE 系统软件 请访问原文链接&#xff1a;https://sysin.org/blog/cisco-catalyst-9000/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&…...

编程日记 2024/10/12 10:55:41

Python知识点：基于Python技术，如何使用MMDetection进行目标检测

开篇&#xff0c;先说一个好消息&#xff0c;截止到2025年1月1日前&#xff0c;翻到文末找到我&#xff0c;赠送定制版的开题报告和任务书&#xff0c;先到先得&#xff01;过期不候&#xff01; 使用MMDetection进行目标检测的Python技术详解 MMDetection是一个开源的目标检测…...

编程日记 2024/10/12 10:53:38

Chromium HTML Tags与c++接口对应关系分析

一、HTML 标签(HTML Tags) <a> <head> <img>等等这些标签在c中的接口是如何定义和查找的呢&#xff1f; 更多标签参考&#xff1a; HTML <a> target 属性 (w3school.com.cn) 二、html_tag_names.json5 (third_party\blink\renderer\core\html\htm…...

编程日记 2024/10/12 10:51:35

React Fiber 解析：前端性能提升密码

文章目录 背景React 采用 fiber 主要为了解决哪些问题&#xff1f;性能问题&#xff1a;用户体验问题&#xff1a; 为什么在 React 15 版本中性能会差&#xff1a;浏览器绘制原理&#xff1a;react 15 架构和问题 那么 fiber 怎么解决了这个问题&#xff1f;任务“大”的问题递…...

编程日记 2024/10/12 10:50:34

【吊打面试官系列-微服务面试题】微服务架构如何运作？

大家好&#xff0c;我是锋哥。今天分享关于【微服务架构如何运作&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; 微服务架构如何运作&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 微服务架构是一种将单一应用程序构建为一组小型、独…...

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

Windows系统编程 - 目录操作、磁盘、卷信息

前言 各位师傅大家好&#xff0c;我是qmx_07&#xff0c;今天继续讲解Windows系统编程的相关知识:目录操作 目录 目录操作 创建目录 通过CreateDirectory函数创建目录 原型: BOOL CreateDirectoryA([in] LPCSTR lpPathName,//目录名称[in, opt…...

编程日记 2024/10/12 10:36:18

搭建SaaS知识库：优化教育机构的在线教学效能

随着信息技术的飞速发展&#xff0c;教育领域正经历着前所未有的变革。在线教学已成为教育机构提供灵活学习体验、扩大覆盖范围、提升教学效率的重要手段。然而&#xff0c;如何在海量资源与复杂教学场景中高效管理知识&#xff0c;确保教学质量&#xff0c;成为教育机构面临的…...

编程日记 2024/10/12 10:35:17

CSS中backdrop-filter详解

文章目录 CSS中backdrop-filter详解一、引言二、backdrop-filter基础1、基本概念1.1、基本语法 2、滤镜函数2.1、代码示例 三、实际应用1、创建模糊背景1.1、代码示例 2、结合其他CSS属性2.1、代码示例 四、总结 CSS中backdrop-filter详解 一、引言 在现代网页设计中&#xf…...

编程日记 2024/10/12 10:30:10

AI测试入门：理解 LLM 的基准测试（Benchmark）

AI测试入门：理解 LLM 的基准测试（Benchmark） 1. 基准测试的定义2. 基准测试的目的3. 基准测试的常用指标4. 基准测试的流程5. 常用的AI基准测试框架总结1. 基准测试的定义 LLM 的基准测试是一种评估 LLM 的标准化方法，通过使用预定义的数据集、任务和评估指标，对LLM 在特定…...

编程日记 2024/10/12 10:29:09

InternVid：用于多模态视频理解与生成的大规模视频-文本数据集 | ICLR Spotlight

InternVid 是一个开源的大规模视频-文本数据集&#xff0c;旨在促进视频理解和生成任务的发展&#xff0c;由上海人工智能实验室与南京大学、中国科学院等单位联合发布&#xff0c;相关的工作已经被ICLR2024接收。它包含超过 700 万个视频&#xff0c;总时长近 76 万小时&#…...

编程日记 2024/10/12 10:27:07