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

CSS 3D转换

news 2025/8/29 4:04:34

在 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

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/8/27 13:11:22

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2025/8/5 6:55:17

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/8/22 3:01:43

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/7/30 18:28:44

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/8/22 3:26:26

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2025/8/22 3:26:39

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2025/8/10 2:34:22

OkHttp 中实现断点续传 demo

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

编程新知 2025/8/9 2:59:35

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/7/20 8:11:39

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57