# 3D介绍

在本課裡您會學到：

1. 了解2D基礎知識
2. 沿著X軸和Y軸的移動
3. 介紹Z軸
4. 視差概述
5. 三維空間中的二維物體

## 了解二維基礎知識

在我們進入三維空間之前，我們首先要了解前兩個維度是如何工作的。我們具體談論的是沿X軸的水平運動和沿Y軸的垂直運動。

![](/files/cLskixCA5cujz7wfAhw3)

網絡上的大部分內容都是由二維元素組成的。這包括您在網站上看到的任何東西，如圖片、標題、段落和按鈕。這些元素的寬度和高度以及它們與其他元素之間的距離都是在兩個維度上發生的，沒有實際的深度。

## 沿著X軸和Y軸的移動

當元素在水平方向移動時，我們要調整它的X位置。而當我們垂直移動時，我們要調整它的Y位置。當我們在對角線上移動時，我們要使用X和Y的組合。

## 介紹Z軸

現在讓我們來談談我們的第三個維度，Z軸。當我們在處理三維空間時，我們不僅僅是在左右和上下移動，我們還要處理深度問題。

因為網路是由很多這樣的2D元素組成的，並非所有的3D都必須是一個擠出物，或者一個3D物體。我們可以把單個的2D元素，沿著Z軸，在3D空間內與它們進行互動。我們可以移動它們，旋轉它們--我們可以對它們做任何我們想做的事情。

## 視差概述

三維運動最好的東西之一是視差的概念。在下面的例子中，我們把卡片放在桌子上來說明視差。這些卡片都沒有移動；我們只是將攝像機向左右移動。我們只是在沿X軸移動攝像機或我們的視野。

**注意**

離我們最近的名片似乎移動得更快。而遠處的卡片似乎移動得更慢。這種位移，或者說離我們較近和較遠的那些物體的速度之間的差異，就是視差。

## 三維空間中的二維物體

這些卡片都沒有任何深度，所以從側面看它們會消失--3D運動並不總是需要3D物體。

視差運動的概念可以給我們的項目帶來一點深度，以略微不同的速度移動不同的元素，可以真正為3D外觀設定一個舞臺。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tenten.co/docs-webflow/webflow-101/7-dong-hua/3d-jie-shao.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.