https://www.cnblogs.com/cmy1996/p/9129307.html
動畫效果
效果分析
當鼠標滑過包含塊時，元素整體翻轉180度，以實現“正”“反”面的切換。
HTML分析
分析：.container，.flip為了實現動畫效果做准備。.front,.back各包裹一張圖片。
實現該效果的HTML如下：
<div class="container"> <div class="flip"> <div class="front"> <img src="images/pic00.jpg" alt=""> </div> <div class="back"> <img src="images/pic01.jpg" alt=""> </div> </div> </div>CSS分析
1. 元素布局
為了實現以上效果，先進行元素布局。給.front,.back相對.flip進行絕對定位,讓他們在相同位置重疊。
布局部分代碼如下：
.container,.front,.back{width:380px;height:270px;} .flip{position:relative;} .front,.back{position:absolute;top: 0px;left: 0px;}設置之后我們發現.back的圖片在.front的上面，因此給.front設置.fornt{z-index:2;}
注意：不要為了防止元素溢出設置overflow屬性，這將導致3D效果無法實現。
The following CSS property values require the user agent to create a flattened representation of the descendant elements before they can be applied, and therefore force the used value of transform-style to flat:
overflow: any value other than visible.
opacity: any value less than 1.
filter: any value other than none.
clip: any value other than auto.
2. 動畫效果的實現
注意點：
/*當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。*/
/*注釋：perspective 屬性只影響 3D 轉換元素*/
/*目前瀏覽器都不支持 perspective 屬性。
Chrome 和 Safari 支持替代的 -webkit-perspective 屬性*/
(1) 為了實現動畫效果首先給祖先元素.container,.flip設置以下屬性，以觸發3d效果和設置動畫：
.container{perspective:1000;transform-style:preserve-3d;} .flip{transition:0.6s;transform-style:preserve-3d;}(2)接着，為了讓圖畫翻轉時不露出背面，給.front,.back設置backface-visibility屬性：.front,.back{backface-visibility:hidden;}
(3)為了讓鼠標滑過包含塊時，包含塊翻轉180度，以實現“正”“反”面的切換。給背面的元素設置transform:rotateY(-180deg)，這時我們將無法看到.back。
(4)最后，當用戶的鼠標滑過.container包含塊時,.flip翻轉180度，這樣，.front翻轉180度，由於背面是hidden，無法看見；而.back翻轉180度后，回到0度，以正面示人，這樣我們就能看到背面了。
代碼如下：
.container{perspective:1000;transform-style:preserve-3d;} .container,.front,.back{width:380px;height:270px;} .flip{position:relative;transition:0.6s;transform-style:preserve-3d;} .front,.back{position:absolute;top: 0px;left: 0px;backface-visibility:hidden;} .front{z-index:2;}
./*鼠標還沒放上去之前*//*這里先讓back翻轉180deg就看不到back的圖片了*/
.back{transform:rotateY(-180deg);}
/*鼠標經過的時候 flip就翻轉180deg 翻轉的圖片由於是背面就看不見*//*但由於.back先翻轉了-180deg 所以當他再次rotateY(180deg)的時候 他其實就是正面了即rotate(0)所以此時他能出現 */
.container:hover .flip{transform:rotateY(180deg);}垂直翻轉效果實現
垂直效果與水平翻轉異曲同工。但是如果你只是把rotateY換成rotateX,那么你會發現圖片是以頂部的那條線翻轉的。
請注意：在上面的CSS代碼中，我並未給.flip設置寬高，所以當給.flip應用transform:rotateY(180deg)時，按照默認的transform-origin值，是以元素的中心點為基本點翻轉的。這里.flip的高度是0，所以當然是以頂部的那條線為基礎翻轉。所以解決的辦法有二：
-
給
.flip設置和.front,.back相同的寬高。 -
給
.flip設置transform-origin:100% 135px/*高度的一半*/屬性。
OK,這樣你就會發現垂直翻轉是你想要的效果了！
總結
1. 思路
（1）最外層元素設置perspective以實現3D效果。
（2）當鼠標滑過最外層元素時，第二包裹層翻轉180度，同時設置過渡速度。
（3）兩個翻轉塊絕對定位，以致實現相同位置的疊加。同時設置backface-visibility避免在實現動畫效果時露出背面。
（4）給.front設置z-index屬性使它在寫代碼和展示時都在前面。
（5）讓.back最開始就翻轉180度，以背面示人。
2. 遇到的問題：
（1）為了讓兩個尺寸不一的圖片在包裹塊中大小一致，使用了overflow屬性，無法實現3d效果。解決方法：給img設置width:100%;height:100%;
（2）沒有意識到.flip的高度為0，所以在垂直翻轉時標准點錯誤導致效果不一樣。
（3）多寫才能發現多的錯誤，才知道怎么找錯誤，怎么解決錯誤。