Flip Box 實例應用 -加一個字破壞一套戲名

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 創建翻轉框，您可以按照以下步驟操作：

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

使用 Flip Boxes WordPress plugin 製作 Flip Box

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

目錄