改變者

使用 2D 和 3D 變換來操縱元素的外觀和位置,而不影響周圍的元素。

透過不同的效果賦予您的元素新鮮的吸引力。移動、放大、旋轉和傾斜元素,為它們提供 3D 外觀。

在開始閱讀本手冊之前,請先閱讀 3D 入門指南。

本教程中包含:

  1. 領悟改變
  2. 移動一個元素
  3. 放大一個元素
  4. 旋轉元素
  5. 傾斜元素的比例
  6. 修改變更配置

改變概述

有 4 種改變:

  1. 轉移
  2. 放大
  3. 圍繞
  4. 傾斜

您可以將一個或多個變更合併到一個元素中 造型部分 > 影響 > 2D 和 3D 改變.

移動一個元素

在這種情況下,讓我們包括對 連接區塊。這將在 徘徊 地位:

  1. 移動一個 部分 來自 包括元素面板 到您的網站
  2. 分配一個類別給 部分 (例如“關鍵部分”)
  3. 拖曳一個 連接區塊 來自 包括元素面板 進入 部分 你剛剛插入
  4. 分配一個類別給 連接區塊 (例如,「連接塊」)並根據您的喜好進行自訂
  5. 複製 連接區塊 共 3 個
  6. 選擇 連接區塊
  7. 展開 造型部分 > 選擇器區域 並選擇 徘徊 從下拉式選單中

讓我們應用一個 轉移 改變為 徘徊 的狀態 連接區塊:

  1. 展開 造型部分 > 影響 > 2D 和 3D 變換
  2. 選擇加號以附加新的 改造

轉移 alter 是標準選擇,預設單位為 轉移 值是像素 (px)。您可以透過點擊 PX 並從下拉清單中選擇您喜歡的單位來變更單位。

進一步了解 輸入值和單位.

透過 轉移 變更時,您可以沿著水平 (X) 軸向左和向右調整元素的位置。您也可以沿著垂直 (Y) 軸上下調整位置。調整 X 軸和 Y 軸會使元素沿著對角線移動。

沿 Z 軸移動元素會改變元素的感知深度。但是,除非您建立 後代觀點 最初是在前體元素上。

在我們的插圖中, 部分 您插入的是前驅元素 連接區塊。讓我們調整一下它 後代觀點:

  1. 選擇 部分
  2. 打開 造型部分 > 影響 > 2D 和 3D 改變
  3. 點擊3個點揭曉 變更配置
  4. 修訂 後代觀點 > 距離 至 1000 像素

現在既然 後代視角 已在關鍵段上配置 - 的前驅元素 連接區塊 — 讓我們更新 Z 軸值 連接區塊:

  1. 選擇 連接區塊
  2. 展開 造型部分 > 選擇器區域
  3. 點擊下拉箭頭並選擇 徘徊
  4. 捲動到 影響 > 2D 和 3D 改變 並點擊 轉移 改變你之前製作的
  5. 調整Z值以增強深度透視

將滑鼠懸停在任意 連接區塊 觀察運動中的變化效果-在我們的情況下,效果目前太突然了。

要平滑效果:

  1. 選擇您的 連接區塊 並確保它在 沒有任何 地位
  2. 展開 造型部分 > 影響 > 轉變
  3. 點擊加號以附加班次
  4. 從下拉清單中選擇 改造
  5. 設定 期間 至 500 毫秒

你的轉變 連結區塊 懸停時顯得更加流暢。

重要的: 在元素上定義變換類型時,可以為其一個或多個軸設定值。然而,在變換類型之間切換(例如,從 移動規模)在配置變換值時將導致初始設定遺失。

若要合併多種變換類型而不遺失任何先前的配置,只需使用新增圖示新增另一個變換即可。

修改元素的大小

單獨介紹一下 規模 轉變為我們的 連結區塊: 

  1. 選擇 連結區塊
  2. 使用權 風格面板 > 選擇器字段
  3. 展開下拉式選單並選擇 徘徊
  4. 導航 效果 > 2D 和 3D 變換 然後點擊新增圖標以包含新的轉換
  5. 點選 規模 按鈕並調整 X 軸和 Y 軸的數值

規模 如果該值超過 1,變換會導致元素在視覺上擴展;如果該值位於 0 和 1 之間,則變換會導致元素在視覺上收縮。若要調整各個值,您可以透過取消選擇鎖定圖示來取消連結 X 和 Y 配置。

觀察效果 規模 透過將滑鼠懸停在 連結區塊.

重要的: 為了獲得引人注目的 3D 結果,請考慮沿著 Z 軸縮放。這項技術特別增強了兒童展示不同 Z 值的元素。

探索更多關於 3D視角.

旋轉元素

在申請之前 旋轉 轉型,讓我們消除現有的 移動規模 轉換:

  1. 選擇你的 連結區塊 並確保它在 徘徊 狀態
  2. 使用權 風格面板 > 效果 > 2D 和 3D 變換
  3. 將滑鼠懸停在每個轉換上並選擇垃圾箱圖示(刪除)

添加 旋轉 現在轉型:

  1. 選擇 連結區塊
  2. 使用權 風格面板 > 選擇器字段
  3. 展開下拉式選單並選擇 徘徊
  4. 導航 效果 > 2D 和 3D 變換 然後點擊新增圖示新增新的轉換
  5. 點選 旋轉 按鈕並調整 X、Y 和 Z 軸

要順時針或逆時針旋轉元素,您必須沿著 Z 軸旋轉。如果父元素上沒有設定 3D 透視,則預設情況下 X 軸和 Y 軸旋轉看起來會變平。

若要為 X 軸和 Y 軸旋轉提供更多 3D 外觀,請啟動 3D 透視 — 特別是 兒童視角 - 在父親元素上。在您的場景中,您已經建立了 3D 視角 連結塊的 父元素, 部分.

見證影響 旋轉 透過將滑鼠懸停在 連結區塊.

傾斜元素

在實施之前 傾斜 改造,讓我們刪除現有的 旋轉 轉型:

  1. 選擇您的 連結區塊 並確保它在 徘徊 狀態
  2. 使用權 風格面板 > 效果 > 2D 和 3D 變換
  3. 將滑鼠懸停在現有轉換上並選擇垃圾箱圖示(刪除)

添加 傾斜 現在轉型:

  1. 選擇 連結區塊
  2. 使用權 風格面板 > 選擇器字段
  3. 展開下拉式選單並選擇 徘徊
  4. 捲動到 效果 > 2D 和 3D 變換 然後點擊新增圖標以包含新的轉換
  5. 點選 傾斜 按鈕並調整 X 軸和 Y 軸的數值

您可以使用以下命令調整沿 X 或 Y 軸的剪切 傾斜 轉型。對父元素啟用 3D 透視不會影響傾斜變換。

修改轉換配置

變換配置提供對影響應用於元素的所有變換的基本選項的控制。這些內容涵蓋了轉型 起源,可見性設定 背面, 自我視角,兒童視角.

您可以透過以下方式存取調整配置 外觀面板 > 影響 > 2D 和 3D 過渡 是可能的。您只需點擊 3 個點即可揭開 修改配置

初始點

根據 修改標識發生變更的起點或軸。最初, 降低 位於中點,表示所有調整將從物件的中心部分進行。

讓我們微調一下變換 中點 為了 超連結框

  1. 選擇 超連結框
  2. 揭幕 外觀面板 > 識別符部分
  3. 選擇下拉箭頭並選擇 徘徊
  4. 向下捲動到 影響 > 2D 和 3D 過渡 然後點擊 3 個點即可訪問 修改配置
  5. 修改 根據 觀點 
  6. 將滑鼠懸停在 超連結框

您可以定義 根據 透過選擇其中一個位置 根據 命令。也可以透過輸入水平放置(左側)和垂直放置(頂部)的值來手動調整放置。此外,您可以在 px、%(預設)、vw 和 vh 之間切換測量單位。

如果你移動 根據 例如,在右下角,您的調整將從該位置開始。這僅影響 調整大小 旋轉

3D 視角

當您沒有指定透視圖時,所有 3D 相容的變更(例如,樞軸 X、樞軸 Y、遷移 Z 和調整 Z 大小)將呈現水平、二維外觀或根本沒有影響。啟動 3D 透視使您能夠在 3D 區域中重新定位、旋轉物件並調整其大小。

您可以建立對高階元素的視角並影響其所有後代,或僅影響物件本身。此外,您可以透過定義 Z 軸和觀察者之間的間隙來為物件引入 3D 透視。

視角的間隙測量決定了 3D 效果的強度。為了獲得更顯著的效果,請指定較小的數字(小於1000px)。此方法使觀察者更接近 Z 軸。選擇增加值來減弱效果。

個性化視角

您可以分配一個 個性化視角 如果您希望僅對某個元素及其後代實現 3D 效果,則可以在該物件上執行此操作。然而,它並不像分配一個 在主要對像上。 

為大家介紹一個 個性化視角:

  1. 選擇您想要影響的對象
  2. 打開 外觀面板 > 影響 > 2D 和 3D 過渡 然後點選 3 個點來揭露 修改配置
  3. 設定距離值 個性化視角

後代視角

建立一個 後代視角 位於上部元素上會在其所有相關組件上建立逼真的 3D 外觀。

要設定一個 後代視角 在上部元素上:

  1. 選擇其主要元素 後代視角 你想調整
  2. 揭幕 外觀面板 > 影響 > 2D 和 3D 過渡 然後點擊 3 個點即可訪問 修改配置
  3. 改造 差距 根據 供您修改

這些 3D 排列將應用於變換上級元素的後代上配置的屬性。

對面

後部 使您可以選擇決定物件背面的可見性。

預設情況下,當您沿著 X 軸或 Y 軸將元素旋轉 180° 時,它會顯示為倒置的,就像從背面查看一樣。元素內的任何文字內容看起來都是顛倒的,就像透過鏡子看一樣。 

您可以呈現或隱藏 後部 元素變換配置中元素的一部分:

  1. 選擇您要調整的元素
  2. 揭幕 外觀面板 > 影響 > 2D 和 3D 過渡 然後點擊 3 個點即可訪問 修改配置
  3. 之間選擇 可見的 或者 為了 後部

這個功能在設計時很有幫助 旋轉卡 在另一面披露內容。

現在您已準備好將這些項目付諸實行!

麥伊凡
Ewan Mak 的最新帖子 (看全部)