使用變換建立翻頁卡

使用 CSS 3D 變換創建簡單的懸停卡片翻轉動畫。

在本教程中,您將掌握使用 CSS 3D 轉換製作基本卡片翻轉動畫的技術 - 所有這些都不需要手動編碼。卡片輪換是透過揭示補充資訊來引入視覺活力的有效手段。例如,實現卡片翻轉動畫可以讓您突出顯示您正在行銷的商品的更多細節。 

在本教程期間:

  1. 建立一個分段和分區塊來包含您的卡片圖片組件
  2. 時尚卡正反面圖片組件
  3. 配置祖先元素的後代視角
  4. 指定卡片圖片組件的變換屬性
  5. 使卡片包裝器動畫化以在懸停時旋轉 

建立一個段和分區塊來容納您的卡片圖片組件

要開始,請附加一個 部分 在您的頁面上: 

  1. 揭開面紗 插入元素 位於左側工具列中的窗格
  2. 拖曳一個 部分 到您的頁面

位置a 分區塊 在最近插入的段落中:

  1. 提取一個 分區塊 來自 插入元素控制板 並將其嵌入到 部分 先前設立的 
  2. 分配一個類別給 分區塊 (例如,「卡片包裝紙」) 

製作卡片正面和背面圖片組件

要插入並準備卡片圖片組件: 

  1. 單獨掉落2個 圖片組件 來自 插入元素 窗格並將它們放置在卡片包裝器中 分區塊 最近創建的 
  2. 選擇您的初始圖片並為其分配“卡片正面”的類別名稱。對您的下一張圖片重複此過程,但將其指定為卡背的類別名稱。 

要將影像彼此對齊: 

設計,將它們配置為 顯示:區塊。確保進行此調整以使兩張圖片重疊。

分區塊。繼續 間距 並安排每個影像的左右邊距 汽車。如果您需要一種更快的方法來居中圖像,請按一下 水平居中元素 用於自動邊距設定的按鈕。

設計窗格 > 位置,將每個影像修改為 絕對 並指定 位置。 

將卡片圖像絕對定位後,兩張卡片都會堆積起來。卡片背面位於卡片正面後方。

  • 點擊卡片正面圖像
  • 導航 設計 
  • 暫時改變一下 展示沒有任何
  • 建立對父元素的子代視角

    部分 以前包含在您的頁面上嗎?由於它充當 Card 包裝器 Div 塊的父組件,因此我們必須設定該部分的 後代視角。啟用此視角有助於以 3D 方式顯示我們的轉換。 

    1. 選擇 部分
    2. 訪問 設計窗格 > 影響 > 2D 和 3D 轉換
    3. 利用 3 個揭露點來揭開 轉型 配置
    4. 下面 後代視角,指定一個 距離 1234 像素(您可以隨時對其進行微調以匹配您所需的 3D 卡翻轉外觀) 

    指定卡片圖像組件的變換屬性

  • 設計窗格, 繼續 影響 並附加一個 2D 和 3D 轉換 透過補充圖標 
  • 選擇 旋轉 並將圖片組件沿 Y 軸旋轉 180 度 
    1. 重訪 影響 > 2D 和 3D 轉換
    2. 點擊 3 個披露點即可展示 轉型 配置 
    3. 指定 背面 作為
  • 選擇卡片正面圖片組件
  • 調整 展示 堵塞 
  • 挑出卡正面組件。
  • 前往 影響 > 2D 和 3D 轉換 
  • 點擊 3 個披露點即可解鎖 轉型 設定 
  • 決定 背面 作為
  • 將卡片包裝動畫設定為在懸停時旋轉

    1. 訪問 選擇器 卡片包裝器的字段 分區塊 
    2. 選擇 懸停效果 來自 選集 下拉清單
    1. 啟用設定 懸停效果 並導航至 修改 > 2D 和 3D 轉換 
    2. 點選 + 號並選擇 旋轉 選擇 
    3. 調整卡片包裝紙以 Y 軸旋轉 180 度

    為了見證您創建的翻轉動畫,請恢復到卡片包裝器的初始狀態 分區塊 透過選擇 模式 作為 不活躍

    最後,將過渡合併到 CardwrapperDivision 區塊。 

    1. 訪問 外觀面板 > 修改 > 過渡 
    2. 使用附加按鈕附加新的過渡 
    3. 來自 種類 下拉列表,選擇 修改
    4. 包括 1000 毫秒的持續時間 

    是時候慶幸了-你已經完成任務了!點擊設計器中的預覽按鈕來檢查運動中的卡片翻轉。將滑鼠懸停在卡片上並退出,見證卡片翻轉轉換的實際效果!令人振奮!  

    相關資源
    • ‍閱讀有關 2D 和 3D 變換的更多信息
    • 了解有關 3D 透視的更多信息

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