本文將討論與互聯網上的 3D 相關的一些基本概念。探索 2D 和 3D 轉換指南,了解如何在 Webflow 專案中實現這些想法。
本教學涵蓋的主題:
- 掌握基本的 2D 原理
- 水平和垂直運動
- 第三軸簡介—Z
- 視差概述
- 在 3D 設定中放置 2D 對象
了解基本的 2D 概念
在深入研究三個維度之前,了解最初兩個維度的工作原理非常重要。具體來說,這需要沿著 X 軸水平移動並沿著 Y 軸垂直移動。
大多數 Web 內容包含 2D 元件。這包括網站上的圖像、標題、段落和按鈕等元素。這些元素的尺寸,包括寬度、高度以及它們與其他元素之間的距離,都以二維形式出現,缺乏實際的尺寸。 深度。
沿軸運動
當元素水平移動時,它們的 X 位置會調整。同樣,垂直移動涉及 Y 位置的調整。對角線移動是透過 X 和 Y 調整的組合來實現的。
因此,二維定位涉及X軸和Y軸。
Z軸簡介
現在,讓我們專注於第三個維度:Z 軸。在處理三維空間時,不僅是向左、向右、向上和向下移動;還包括向左、向右、向上和向下移動。它還涉及深度。
鑑於網路包含許多 2D 元素,讓我們以它們為例。並非所有 3D 元素都需要是突出物或完整的 3D 物件。事實上,單一 2D 元素可以在 3D 空間內沿著 Z 軸進行操作。它們可以移動、旋轉——本質上,一切皆有可能。
視差概述
3D 運動的一個有趣的方面是視差的概念。在下面的範例中,我們在桌子上放了卡片來示範視差。沒有一張牌是物理移動的;相反,相機或視野僅沿 X 軸移動。
觀察離我們較近的牌似乎移動得更快,而距離我們較遠的牌似乎移動得更慢。近處和遠處物體之間的速度變化稱為視差。
三維空間中的二維元素
令人著迷的部分是這些卡片完全缺乏深度。從側面看時,它們消失了。這 至關重要的 重點是 3D 運動並不總是需要 3D 物件。
透過結合視差運動,我們可以增加項目的深度。以稍微不同的速度移動各種元素可以有效地創建三維外觀。
Ewan Mak 的最新帖子 (看全部)
- 包含或消除工作區點和成員 - 2024 年 4 月 15 日
- 定心框總結 - 2024 年 4 月 15 日
- 儲存站點以供日後參考 - 2024 年 4 月 15 日