WordPress CSS Flip Animation – 照片翻轉效果

max

8 年前

在 WordPress有很多與媒體相關的外掛程式，可以來幫助我們建置漂亮又具互動功能的照片效果。不過這麼多的外掛程式如何挑選與過濾，常常困擾很多剛接觸 WordPress的朋友，最近有朋友問到有沒有什麼比較簡單的方法可以對圖片作互動的效果，像是翻轉照片顯示說明。照片翻轉效果的外掛程式很多，相關的是樣範例也很多，不過要讓初接觸 WordPress的朋友可以輕鬆的操作，max過濾多數的效果後，找到只需要CSS設計就可以達到這個目的。非常適合初接觸 WordPress的朋友，接著就跟大家分享如何的在文章中置入相關的CSS式樣檔設計，來達到照片翻轉效果。

WordPress CSS Flip Animation

首先開啟子佈景主題的式樣檔（style.css），如果沒有子佈景主題請參閱網站以前的文章先建置好子佈景主題。使用文字編輯器編輯 style.css檔案，填入以下語法。

.flip3D{ width:240px; height:200px; margin:10px; float:left; }
.flip3D > .front{
	position:absolute;
	transform: perspective( 600px ) rotateY( 0deg );
	background:#FC0; width:240px; height:200px; border-radius: 7px;
	backface-visibility: hidden;
	transition: transform .5s linear 0s;
}
.flip3D > .back{
	position:absolute;
	transform: perspective( 600px ) rotateY( 180deg );
	background: #80BFFF; width:240px; height:200px; border-radius: 7px;
	backface-visibility: hidden;
	transition: transform .5s linear 0s;
}
.flip3D:hover > .front{
	transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D:hover > .back{
	transform: perspective( 600px ) rotateY( 0deg );
}

.flip3D{ width:240px; height:200px; margin:10px; float:left; }

.flip3D > .front{

position:absolute;

transform: perspective( 600px ) rotateY( 0deg );

background:#FC0; width:240px; height:200px; border-radius: 7px;

backface-visibility: hidden;

transition: transform .5s linear 0s;

}

.flip3D > .back{

position:absolute;

transform: perspective( 600px ) rotateY( 180deg );

background: #80BFFF; width:240px; height:200px; border-radius: 7px;

backface-visibility: hidden;

transition: transform .5s linear 0s;

}

.flip3D:hover > .front{

transform: perspective( 600px ) rotateY( -180deg );

}

.flip3D:hover > .back{

transform: perspective( 600px ) rotateY( 0deg );

}

如果對式樣檔有一些概念的朋友，當然也可以自行調整式樣設計裡面的值。沒有式樣檔概念的朋友也沒有關係，式樣檔裡相關的設定需要調整的地方就只有background，後面接著的數值。

#FC0; 可以修改顏色。
width:240px; 這裡設定寬度。
height:200px; 這裡設定高度。
border-radius: 7px; 四邊圓角度數。

照片翻轉效果

1）第一種是區塊的翻轉。在文章編輯的頁面將編輯模式切換到文字，填入呈現顏色區塊翻轉的語法範例如下。

<div class="flip3D">
  <div class="back">Box 1 - Back</div>
  <div class="front">Box 1 - Front</div>
</div>
<div class="flip3D">
  <div class="back">Box 2 - Back</div>
  <div class="front">Box 2 - Front</div>
</div>
<div class="flip3D">
  <div class="back">Box 3 - Back</div>
  <div class="front">Box 3 - Front</div>
</div>

<div class="front">Box 1 - Front</div>

</div>

<div class="front">Box 2 - Front</div>

</div>

<div class="front">Box 3 - Front</div>

</div>

2）第二種方式是要翻轉照片也可以，同樣在文章編輯的頁面將編輯模式切換到文字，相關語法編輯如下。<div class=”front”>後面填入照片的網址即可。

<div class="flip3D">
  <div class="back">Box 1 - Back</div>
  <div class="front">Box 1 - Front</div>
</div>
<div class="flip3D">
  <div class="back">Box 2 - Back</div>
  <div class="front"><img src="http://yourdomain.com/wp-content/uploads/2016/10/yourimage-02.jpg" /></div>
</div>
<div class="flip3D">
  <div class="back">Box 3 - Back</div>
  <div class="front"><img src="http://yourdomain.com/wp-content/uploads/2016/10/yourimage-03.jpg" /></div>
</div>
<div class="flip3D">
  <div class="back">Box 4 - Back</div>
  <div class="front">Box 4 - Front</div>
</div>

<div class="front">Box 1 - Front</div>

</div>

</div>

</div>

<div class="front">Box 4 - Front</div>

</div>

3）照片翻轉效果示範影片。

結論

對於初接觸 WordPress的朋友來說，如何簡單的操作式樣檔案來增加網頁圖片效果，這是很多新手朋友的需求。很高興的這些在網路上看到的資料可以在 WordPress網站上很容易的整合，不必透過外掛程式就能展現一些動態效果，這應該是對很多網站來說非常好的解決方案。

式樣文件參考來源：https://www.developphp.com/video/CSS/Flip-3D-Boxes-and-Cards-Animation-CSS-Tutorial