一篇文章带你了解CSS3 3D 转换知识
zhezhongyun 2025-05-02 14:48 23 浏览
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/
相关推荐
- Win10全新版本速览 全新图标设计焕然一新
-
来源：太平洋电脑网[PConline资讯]原定于今年下半年发布的Win1021H2（SunValley），再有几个月就要与我们见面了。之前我们已经陆续介绍过新版在开始菜单、窗口动效、通知中心等方...
- 第四周B组最佳选手Icon:陨落天团的小将，还是重生星球的偶像?
-
B组本来被认为是死亡之组，但在上周的异组对抗赛中，实力较强的几只队伍却先后被A组击沉，反而是之前一分难求的OMG2:1战胜了IG，其中Icon功不可没，两次秀翻全场的妖姬和与Juejue中野联动的实力...
- 系统小技巧:不花一分钱 让声音再大些
-
有时，笔记本扬声器的音量可能无法满足我们对声音播放的需求。点击系统托盘的小喇叭图标，音量调节滑动条调整到最大也无效，而添置大功率扬声器又不是我们所愿。这时，可通过调整系统本身的设置或利用第三方软件来解...
- DNF手游:70级毕业搭配曝光!需集齐四类装备，别指望无形升级了
-
随着dnf手游7.16版本的临近，各种70级装备的消息满天飞，真真假假难以辨别，但只要以“发布会爆料”为核心，主播十四的爆料为辅，就能确定70版本的毕业标准搭配，查理策划是打算“集百家之长”于一身，完...
- 学会这5个电脑设置 可解决99%的故障
-
现阶段复工大家都是宅家办公吧，所以电脑可谓是大救星，因为无论是“停课不停学”的网课，还是在家办公的穷社畜，都离不开电脑。所以今天小编就来教大家几招电脑的自救方法，让你可以在电脑出问题时从容面对，足不出...
- LOL:上单腕豪的取胜之道——掌控自身优势，融合装备特效
-
01前言腕豪这个英雄，在11.9版本之前都没有太多的出场机会，即使出现也大多是在辅助位置上，充当开团、先手控制的角色。但是在11.9版本以后，这个英雄突然之间仿佛飞升了一般，直接冲上T1级别上单，之前...
- 英雄联盟手游:一篇文章读懂所有龙buff属性效果，还不赶紧收藏
-
英雄联盟手游采用也是经典峡谷地图，看起来和端游并没有太大差异，但实际上为了适应手游节奏，官方也是进行了适当调整，所以包括红蓝buff，大龙小龙buff效果会有一定的差异，现在就来看看小龙和大龙具体属性...
- 双击打不开怎么办?双击文件夹显示属性的解决办法
-
今天小编在双击文件夹的时候，就是打不开，还弹出“属性”对话框，不知道大家有没有出现过，为避免出现这种情况时大家束手无策，今天小编就来为大家分享一下解决方法。1.检查键盘，看看“Alt”键是否卡住。由于...
- 柜子布局好超省空间，1㎡当10㎡用，收纳涨5倍!户型图直接抄
-
柜子不嫌多，就怕你家放不下！▼每个空间几乎都需要柜子客厅要有电视柜，卧室要能放下全家四季的衣柜，厨房还需要大容量的橱柜空间就这么小，想要榨出放柜子的地方，还要活得不拥挤简直太难了！其实全是你找错地方打...
- 制作幻灯片的另类方法（然后制作幻灯片）
-
如果提到制作幻灯片，很多人都会想到PowerPoint。PowerPoint提供了很多模板，但这些模板实用性并不太高；PowerPoint的交互还算比较方便，但不可否认，交互显得有些呆板，而且要想修改...
- 《心灵杀手重制版》画面晃动怎么办?画面晃动解决办法
-
针对《心灵杀手重制版》画面晃动的问题，以下是一些解决办法：修改游戏启动路径：打开游戏所在的文件夹，找到游戏图标的属性并打开。在属性中修改启动路径，加入“-noblur”参数。例如，如果游戏安装在“X:...
- win10网络图标是小地球怎么办（excel表格怎样选定区域打印）
-
win10系统右下角的网络图标突然变成地球图标，而且无法上网，提示无法连接到Internet。出现这个问题多数是因为win10正式版更新了或者是网络中断后遗症。那么win10网络图标变成地球怎么办呢？...
- 重看电脑任务栏的使用方法:windows 10小贴士
-
【环球科技综合报道】据日本Livedoor新闻网2月18日报道,windows电脑的屏幕下方配置的任务栏由于总是在电脑桌面上显示,可以说是一个映入眼帘的机会格外多的区域。像是把经常使用的软件图标设置在...
- 《地狱之门》攻略:四大元素属性介绍
-
《地狱之门》是近期比较看好的一款卡牌手游，绚丽的3D游戏画面以及创新的即时战斗系统给人耳目一新的感觉，非常值得一试。玩家不仅可以体验到卡牌收集的乐趣，更主要的是能体验到酣畅淋漓的战斗体验。下面小编就来...
- 一脸懵?DNF希洛克词条赋予属性触发条件解析
-
DNF希洛克已经开放两天，但是还是看到不少小伙伴对于希洛克词条赋予系统充满疑惑。今天就来简单易懂的给大家科普一下希洛克词条赋予系统里的弯弯绕绕。◎希洛克装备融合在希洛克获取了专属史诗之后，即可通过歌兰...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- 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)
- CSS 水平对齐 (Horizontal Align) (30)