今天開發專案時，表格資訊填寫下方會有提示行，為藍色背景。提交表格資料時候，如果有錯誤提示，會在提示行上方，背景紅色。但是兩層提示會顯得很礙眼，所以自己想法是如果有錯誤提示，直接翻轉提示行180度然後顯示錯誤提示，然後2s後錯誤提示翻轉回到提示行。大概就是這麼個簡單動畫。

這裡一開始打算用一個div來翻轉和顯示，但是翻轉180度以後，元素裡面的字型是倒的，這顯然不符合我們的要求。後來終於找到了解決辦法。

當我們進行3d轉換的時候，有一個屬性可以設定backface-visibility。參考W3C的解釋：http://www.w3school.com.cn/cssref/pr_backface-visibility.asp

大致意思就是當元素進行3d轉換並且呈現背面時候，不顯示該元素。這樣思路就來了，我們可以設定兩個重疊的元素，一個在上方，並且設定背面不顯示。當兩個元素同時轉動，前方元素因為背面不顯示的原因（即180度後），會顯示後面元素。再一個180度後，前方元素又開始顯示了。這樣看起來就像是一個元素轉動到180後切換了一個元素一樣。

話不多說，貼程式碼了。

css：

img.center{display: block;position: absolute;width: 512px;height: 512px;left: 50%;top: 50%;margin-left: -256px;margin-top: -256px;}
img.left{display: block;position: absolute;width: 256px;height: 256px;left: 50px;top: 50px;}
.z_index{z-index: 5;}
.turn_front{animation:front 6s linear infinite;backface-visibility: hidden;}
.turn_back{animation:back 6s linear infinite}

		@keyframes front{
			0%{transform: rotateX(0deg);}
			30%{transform: rotateX(180deg);}
			70%{transform: rotateX(180deg);}
			100%{transform: rotateX(360deg);}
		}

		@keyframes back{
			0%{transform: rotateX(-180deg);}
			30%{transform: rotateX(0deg);}
			70%{transform: rotateX(0deg);}
			100%{transform: rotateX(180deg);}
 

}

<img class="z_index left" src="../image/Microsoft_Office_front.png" id="front_img">
	<img class="left" src="../image/Microsoft_Office_back.png" id="back_img">

	<img class="z_index turn_front center" src="../image/Microsoft_Office_front.png">
	<img class="turn_back center" src="../image/Microsoft_Office_back.png">

	<button onclick="turn()">點我翻轉</button>
 

js：

function turn() {
				var front_img = document.getElementById("front_img");
				var back_img = document.getElementById("back_img");

				front_img.classList.add("turn_front");
				back_img.classList.add("turn_back");

				setTimeout(function() {
				front_img.classList.remove("turn_front");
				back_img.classList.remove("turn_back");
				},6000);
			}

中間的圖片一直迴圈轉動，左方圖片需要點選按鈕執行一次轉動。