一篇文章带你了解CSS3 3D 转换知识
zhezhongyun 2025-05-02 14:48 10 浏览
CSS3 3D变换功能允许在3D空间中变换元素。
一、元素的3D转换
使用CSS3 3D变换功能，可以对三维空间中的元素执行基本的变换操作。如移动，旋转，缩放和倾斜。
变换后的元素不会影响周围的元素，但可以像绝对定位的元素一样将它们重叠。但是，变换后的元素在其默认位置（未变换）仍会在布局中占用空间。
二、使用CSS变换和Transform()函数变换功能
CSS3 transform属性使用变换功能来操纵元素使用的坐标系，以便应用变换效果。
案例描述了3D变换功能。
1. translate3d()
rotation3d()函数将3D空间中的元素围绕[x，y，z]方向向量为圆点旋转指定角度。这可以写成rotate(vx，vy，vz，angle)。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>项目</title>
<style>
.container {
width: 125px;
height: 125px;
perspective: 500px;
border: 4px solid #e5a043;
background: #fff2dd;
}
.transformed {
-webkit-transform: translate3d(25px, 25px, 50px);
/* Chrome, Safari, Opera */
transform: translate3d(25px, 25px, 50px);
}
img {
width: 125px;
height: 125px;
}
</style>
</head>
<body style="background-color: aqua;">
<h2>Before Translation:</h2>
<div class="container">
<img src="timg.jpg" alt="Diamond Card">
</div>
<h2>After Translation:</h2>
<div class="container">
<img src="timg.jpg" class="transformed" alt="Diamond Card">
</div>
</body>
</html>
该功能translate3d(25px, 25px, 50px)将图像沿X和Y轴正方向移动25个像素，并沿Z轴正方向移动50个像素。
注：
3D变换使用三维坐标系，但是沿Z方向的移动并不总是很明显，因为这些元素存在于二维平面（平面）上并且没有深度。
通过使Z轴上较高的元素（即距观看者更近的元素看起来较大，而离观看者更远的元素看起来更小），可以使用perspective和perspective-origin的CSS属性为场景添加深度感。
注意：
如果对一个元素应用3D变换而不设置透视，结果将不会显示为三维效果。
2. rotate3d()
该rotate3d()函数围绕[x，y，z]方向向量将3D空间中的元素旋转指定角度。可以写成rotate(vx, vy, vz, angle)。
例：
.container{
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #a2b058;
background: #f0f5d8;
}
.transformed {
-webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
transform: rotate3d(0, 1, 0, 60deg);
}
img {
width: 125px;
height: 125px;
}
该功能rotate3d(0, 1, 0, 60deg)将图像沿Y轴旋转60度。也可以使用负值沿相反方向旋转元素。
3. scale3d()
scale3d()函数更改元素的大小。可以写成scale(sx, sy, sz)。除非将其与旋转和透视图等其他变换功能结合使用，否则此功能的效果并不明显。
例：
.container{
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #6486ab;
background: #e9eef3;
}
.transformed {
-webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Chrome, Safari, Opera */
transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg);
}
img {
width: 125px;
height: 125px;
}
运行结果：
函数scale3d(1, 1, 2)沿Z轴缩放元素，函数rotate3d(1, 0, 0, 60deg)沿X轴旋转图像60度。
4. matrix3d()
matrix3d()功能可以一次执行所有3D转换，例如平移，旋转和缩放。它采用4×4转换矩阵]形式的16个参数。
这是使用matrix3d()功能执行3D转换的示例。
示例
.container {
image
但是，一次执行多个转换时，使用单个转换函数并按顺序列出它们会更方便，如下所示：
示例
.container {
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #d14e46;
background: #fddddb;
}
.transformed {
-webkit-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);
/* Chrome, Safari, Opera */
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);
}
img {
width: 125px;
height: 125px;
}
三、总结
本文基于CSS基础，教读者如何去进行2D->3D的转换，介绍了常见的的几个方法。去进行移动、缩放、转动、拉长或拉伸等一系列操作。使用Html语言，使用丰富的案例，以及效果图的展示。
欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。
希望能够帮助你学习。
想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/
相关推荐
- 前端面试:聊聊 meta 标签?（meta标签用法）
-
提供给页面的一些元信息（名称/值对），有助于SEO。Meta标签是HTML中用于定义文档类型声明的标签。它们通常被用在head标签中，与文档的body标签相关联。在一个有head...
- web网页性能分析系列（网页性能指标有哪些）
-
在前端开发中，App或者WebPage性能的好坏和响应速度，尤其是App端显得格外重要，一直都是前端很头疼的问题。专业的测试工具可以知道自己的网页还有哪些需要优化的地方，总体的评分是多少，是否合乎用...
- [抓狂瞬间] 5 大差异 + 布局绝招!前端元素面试通关秘籍
-
刚入行的搬砖工程师，面对面试必问题“行内元素和块级元素有啥区别”，是不是心跳加速，大脑却一片空白？别担心！这看似基础的问题，实则是面试逆袭的突破口。今天就带你深入剖析，用5个关键差异，解锁前端布...
- python中Django视图(view)的详解(附示例)
-
本篇文章给大家带来的内容是关于python中Django视图(view)的详解（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一个视图函数（类），简称视图，是一个简单的Pyt...
- MySQL进行整库数据备份「表(结构+数据)、视图、函数、事件」
-
前言 通常情况下，我们需要改什么地方就备份什么地方就可以了，但也免不了需要整库备份的时候，本文记录实现MySQL使用脚本进行整库数据备份【表（结构+数据）、视图、函数、事件】 主要是使用mys...
- python入门-day14-周末小项目（python周末培训班哪个好）
-
周末小项目-简易记事本的内容。这是一个综合练习，结合之前学过的函数、文件操作和异常处理，设计一个简单的命令行记事本程序。我会用清晰的步骤和代码带你实现添加、查看、删除笔记并保存到文件的功能，确保...
- Python必会的50个代码操作（python代码介绍）
-
学习Python时，掌握一些常用的程序操作非常重要。以下是50个Python必会的程序操作，主要包括基础语法、数据结构、函数和文件操作等。1.HelloWorldprint("Hello,...
- ScalersTalk成长会Python小组第7周学习笔记
-
Scalers点评：在2015年，ScalersTalk成长会完成Python小组完成了《Python核心编程》第1轮的学习。到2016年，我们开始第二轮的学习，并且将重点放在章节的习题上。Pytho...
- 电脑CMD命令与电脑工作效率提升（cmd使用提升命令）
-
在日常使用电脑同时按“windows+R”，可以弹出来一个框然后输入CMD弹出以下框：在这个框中输入一些内容可以简化一些我们的电脑操作好的，以下是一些最常用的CMD命令，按功能分类整理，适合日常使用和...
- 多线程实现消息推送并可重试3次以及1小时后重试
-
#-*-coding:utf-8-*-"""CreatedonTueApr2209:05:462025@author:1""&#...
- RBAC权限模型（rbac权限模型的优点）
-
RBAC权限模型RBAC权限模型（Role-BasedAccessControl）即：基于角色的权限控制。这是目前最常被开发者使用也是相对易用、通用权限模型。准备工作CREATETABLE`s...
- 如何使用PIL生成验证码?（pixivic验证码）
-
web项目中遇到使用验证码的情况有很多，进行介绍下使用PIL生成验证码的方法。安装开始安装PIL的过程确实麻烦各种问题层出不绝，不过不断深入后就没有这方面的困扰了：windows安装：直接安装Pil...
- 技术是这样应用的(一)（技术的运用）
-
WindowsServer2003路由与远程访问在计算机网络教室使用过程中网络访问控制的实现目前很多计算机网络教室采用双网卡服务器的路由和远程访问功能，通过NAT地址转换实现教室内学生机的互联网访...
- Flask-RESTful 用法指南（flask写restful接口）
-
Flask-RESTful是一个Flask扩展，用于快速构建RESTfulAPI。它提供了简单的语法来创建资源路由，并内置了请求解析和响应格式化功能。##安装首先安装Flask-REST...
- Python办公自动化系列篇之三:PowerPoint演示文稿(.pptx)
-
作为高效办公自动化领域的主流编程语言，Python凭借其优雅的语法结构、完善的技术生态及成熟的第三方工具库集合，已成为企业数字化转型过程中提升运营效率的理想选择。该语言在结构化数据处理、自动化文档生成...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- HTML 参考手册 (28)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)