• Post category:不偉大的作品
  • Post last modified:2023 年 12 月 13 日

Flip Box 翻轉方塊是一種可以在點擊滑鼠時翻轉的網頁元素。當您點擊翻轉方塊時,它會翻轉並顯示另一面。您可以使用 Flip Box 來顯示兩面不同的內容,如圖片和文字,或者使用它來創建交互式元素,如折叠菜單或可展開的詳細信息。

Flip Box 翻轉方塊是一種交互式元素,允許您在兩種或多種不同狀態或內容之間翻轉或切換。它對於以更具吸引力和交互性的方式顯示信息很有用。

Flip Box 翻轉方塊效果

《龍門客棧》

龍門客棧

?加一個搬字?

搬龍門客棧

《哈爾移動城堡》

哈爾移動城堡

?加一個濱字?

哈爾濱移動城堡

《海底奇兵》

海底奇兵

?加一個撈字?

海底撈奇兵

《捉鬼敢死隊》

捉鬼敢死隊

?加一個酒字?

捉酒鬼敢死隊

《奇異博士》

奇異博士

?加一個果字?

奇異果博士

《五個撲水的少年》

五個撲水的少年

?加一個貨字?

五個撲水貨的少年

在 WordPress 裡有三個方法可以實現Flip Box效果,分別是使用 Plugin,使用Elmentor Pro 和用html 及css

用html 及css 製作 Flip Box

可以用如下的 HTML 代码來製作 Flip Box:

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <!-- front content -->
    </div>
    <div class="flip-box-back">
      <!-- back content -->
    </div>
  </div>
</div>

接著,用如下的 CSS 代码來使 Flip Box 有翻轉的效果:

.flip-box {
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-box-front {
  z-index: 2;
}

.flip-box-back {
  transform: rotateY(180deg);
}

.flip-box-inner:hover .flip-box-front {
  transform: rotateY(180deg);
}

.flip-box-inner:hover .flip-box-back {
  transform: rotateY(0deg);
}

使用這樣的 HTML 和 CSS 代码,當你將滑鼠滑過 Flip Box 時,就會看到 Flip Box 翻轉的效果。

使用 Elmentor Pro 製作 Flip Box

要使用 Elementor Pro 創建翻轉框,您可以按照以下步驟操作:

  1. 打開 Elementor Pro 並創建一個新頁面或編輯現有頁面。
  2. 將“翻轉框”小部件從左側面板拖到頁面上。
  3. 在小部件的設置中,您可以選擇要使用的翻轉效果類型(例如水平翻轉、垂直翻轉)。您還可以指定翻轉框的正面和背面的內容。
  4. 使用樣式選項自定義翻轉框的外觀,例如顏色、字體和邊框。
  5. 預覽翻轉框以查看其外觀,並進行任何必要的調整。
  6. 當您對結果滿意時,保存並發布頁面。

使用 Flip Boxes WordPress plugin 製作 Flip Box

Flip Boxes WordPress plugin 是一個 WordPress 外掛程式,可以在您的 WordPress 網站上添加翻轉方塊。翻转方塊是一種可以在點擊滑鼠時翻轉的網頁元素。當您點擊翻转方塊時,它會翻轉並顯示另一面。您可以使用 Flip Boxes plugin 來顯示兩面不同的內容,如圖片和文字,或者使用它來創建交互式元素,如折叠菜單或可展開的詳細信息。您可以在 WordPress 插件庫中搜索並安裝 Flip Boxes plugin,或者從網站插件目錄下載並安裝它。