• 直接上程式碼看效果
  html:

<div class="father">
		<div class="before">正面</div>
		<div class="after">反面</div>
</div>

css樣式：

.father{
	 		width: 300px;
			height: 200px;
			position: relative;
			transition: all 1s linear;
			transform-style: preserve-3d;
	 	}
		.before,.after{
			width
 
: 300px;
			height: 200px;
			position: absolute;
			top: 0;
			left: 0;
		}
		.before{
			background: red;
			z-index: 222;
		}
		.after{
			background: lightblue;
			transform: rotateX(-180deg);
		}
		.father:hover{
			transform: rotateX(180deg);
		}
		````
		ps:1. 若缺少transform-style:preserve-3d；圖片翻轉效果就無法實現，實現翻轉的關鍵
		2. transform-style屬性需要配合transform屬性使用，預設值是flat（子元素保留其3D位置。在2D平面呈現）；preserve-3d（子元素保留其3D位置）。