百度360必应搜狗淘宝本站头条
grid 设置导航栏dedecms模版移位运算context xml
当前位置：网站首页 > 文章教程 > 正文

一篇文章带你了解CSS3 3D 转换知识

xsobi 2024-12-31 15:26 1 浏览

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/

相关推荐

MySQL 正则表达式最全介绍

MySQL支持使用正则表达式进行模式匹配和文本搜索。正则表达式提供了一种强大的工具，可以用来匹配和检索字符串中的复杂模式。MySQL中的正则表达式功能主要在REGEXP或RLIKE运算符中使用。1....

正则前面的 (?i) (?s) (?m) (?is) (?im) 是什么意思

Q:经常看见的正则前面的(?i)(?s)(?m)(?is)(?im)是什么意思？...

SQL中的正则表达式

正则表达式通常用来匹配字符，比如在一段字符中截取我们想要的字符，又或者将不想要的字符串替换，或者统计某个或者某几个字符出现的次数，我们都可以使用Oracle提供的正则表达式语法来完成。1.比如，我们在...

学习VBA，报表做到飞 第四章 正则表达式 4.10 贪婪模式与懒惰模式

第四章正则表达式4.10贪婪模式与懒惰模式正则表达式匹配时默认为贪婪模式，也就是尽可能多的匹配。有时候我们需要对符合条件的内容分开匹配，就要用到懒惰模式。...

Python re模块 正则表达式之compile函数

一、应用场景为了重复利用同一个正则对象，需要多次使用这个正则表达式的话，使用re.compile()保存这个正则对象以便复用，可以让程序更加高效。二、使用方法...

几条常用的JavaScript正则表达式

在做项目或者代码编写过程中，一般会遇到验证电话、邮箱等格式是否正确合法的问题。通常我们会使用正则表达式，自己写很麻烦，且正则表达式又不是那么容易记住。所以现在分享几条常用的正则表达式，需要的时候直接复...

C语言中使用正则表达式

POSIX规定了正则表达式的C语言库函数，参见regex（3),我们已经学了很多C函数的用法读者应该具备自己看懂man手册的能力C语言中使用正则表达式一般分为三步：1.编译正则表达式regco...

VBA与Excel入门系列-12-正则表达式(上篇)

系统环境：Windows10...

系列专栏(八):JS的第七种基本类型Symbols

ES6作为新一代JavaScript标准，已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解，MozillaWeb开发者博客推出了《ES6InDepth》系列文章。CSDN...

EXCEL正则表达式的基础语法

正则表达式的基本概念及用途了解之后，我们就来学习下具体的语法，先以一个简单的例子来讲解。基础语法：比如，A1单元格中有一串字符：aabbccdd...

这几个冷门到你没听过的App，好用到为你打开新世界大门

一些好用的App总被埋没在数以百万计的应用商店中。今天为大家推荐几款Windows、Android、iOS、macOS平台里略显小众、但足够好用的遗珠App。万彩办公大师（Windows）转换Offi...

C/C++知识分享:C语言正则表达式

C语言的正则表达式规则，特此跟大家分享。一、C语言如何使用正则表达式？C语言使用正则表达式的方法很简单，只需要包含正则表达式头文件即可：...

Github工具库(二)

作者：Yunying...

在 JavaScript 中替换所有指定字符 3 种方法

在JS没有提供一种简便的方法来替换所有指定字符。在Java中有一个replaceAll()，replaceAll(Stringregex,Stringreplacement))方法...

正则表达式进阶

正则表达式，是每个程序员的必备的技能1.贪婪匹配和惰性匹配...

一周热门
最近发表
标签列表