兩面翻轉----背面隱藏（backface-visibility:hidden）

實現圖片的兩面翻轉,效果如下圖

主要是使用背面隱藏(backface-visibility: hidden;) 實現圖片的兩面翻轉

首先在body中一個 div 中放置兩個圖片 img

<div>
	<img src="images/1.jpg" alt="">
    <img src="images/2.jpg" alt="">
</div>

下面設置div的尺寸和圖片一致,由於圖片img需要脫離文檔流(absolute),div要relative;
子絕父相

div {
            width: 250px;
            height: 170px;
            margin: 100px auto;
            position: relative;
            border: 1px solid pink;
        }

設置img的樣式,使用絕對定位(position: absolute),設置動畫過渡transition

div img {
            width: 100%;
            height: 100%;
            position: absolute;
            transition: transform ease 1s;/*動畫的過渡*/
        }

第一個img設爲 z-index=1,使第一個img在上面,然後使用背面隱藏(backface-visibility: hidden;) 讓第二個img實現隱藏

div img:first-child {
            z-index: 1;
            backface-visibility: hidden;/*背面隱藏*/
       }

然後使用僞類 :hover鼠標經過使img翻轉180°

div:hover img {
            transform: rotateY(180deg);
        }

效果如下：