介绍三维

在本文中，我们将介绍web上的一些基本3D概念。检查2D和3D转换指南学习如何将这些概念应用到您的Webflow项目中。

在这节课中:

1. 理解二维基础知识
2. 沿X轴和y轴运动
3. 介绍了z轴
4. 视差概述
5. 3D空间中的2D物体

理解二维基础知识

在我们了解三维空间之前，我们首先要了解前二维空间是如何工作的。我们具体讨论的是沿着x轴的水平运动，和沿着y轴的垂直运动。

网页上的大部分内容都是由2D元素组成的。这包括你在网站上看到的任何东西，如图片、标题、段落和按钮。这些元素的宽度和高度以及它们与其他元素之间的距离都发生在二维空间中。没有实际的深度。

沿X轴和y轴运动

当元素水平移动时，我们调整它的x位置。当我们垂直移动时，我们调整它的y坐标。当我们对角线移动时，我们使用X和Y的组合。

这就是在二维空间中的定位x轴和y轴。

介绍了z轴

现在我们来谈谈三维空间:z轴。当然，当我们处理三维空间时，我们不只是左右上下移动;我们在处理深度问题。

因为网页是由许多2D元素组成的，所以我们将以此为例。并不是所有的3D都必须是挤压或3D物体。我们可以选择单独的2D元素并在3D空间中沿着z轴与它们互动。我们可以移动它们，旋转它们，我们可以对它们做任何我们想做的事情。

视差概述

关于3D运动最好的一点就是视差的概念。在下面的例子中，我们将卡片支在桌子上以说明视差。没有一张牌在动;我们只是左右移动摄像头。我们只有沿着x轴移动相机或我们的视野。

注意，离我们最近的名片似乎移动得更快。远处的牌似乎移动得更慢。这种位移，或者说距离我们近和远的物体的速度差，就是视差。

3D空间中的2D物体

这里的神奇之处在于这些卡片都没有任何深度。从侧面看，它们消失了。的关键3D运动并不总是需要3D物体。

视差运动的概念可以给我们的项目带来一些深度。以稍微不同的速度移动不同的元素可以为3D效果奠定基础。