HTML結構：

<div class="wrap">
<!-- 還是要多加一層，因為perspective只對子元素有效 -->
    <div class="flip">
        <div class="front">
            ![](img/1.jpg)
        </div>
        <div class="back">
            ![](img/2.jpg)
        </div>
    </div>
</div>

CSS思路：

1. 父元素flip相對定位，子元素front,back絕對定位
2. 背面隱藏backface-visibility: hidden;
3. 使被轉換的子元素保留其 3D 轉換transform-style: preserve-3d;。Firefox 支持 transform-style 屬性透敌，Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 屬性蕴纳。
4. 定義 3D 元素距視圖的距離，以像素計案狠，其子元素會獲得透視效果perspective: 1000px;。目前瀏覽器都不支持 perspective 屬性拉庵，Chrome 和 Safari 支持替代的 -webkit-perspective 屬性。注意300px太少了茫蛹，感覺旋轉的時候離屏幕太近了窃蹋。
5. back沿著Y軸旋轉到背面transform: rotateY(180deg);
6. containerhover時杀迹，整個flip沿著Y軸旋轉

CSS代碼：

        .flip, .front, .back{
            width: 400px;
            height: 300px;
        }
        .wrap, .flip{
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            perspective: 1000px;
            /* 300px太小了 */
            -webkit-perspective: 1000px;
        }
        .flip{
            position: relative;
            transition: all 1s;
        }
        .front, .back{
            position: absolute;
            top: 0;
            left: 0;
            backface-visibility: hidden;
        }
        .back{
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
            -ms-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            -o-transform: rotateY(180deg);
        }

        .wrap:hover .flip{
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
            -ms-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            -o-transform: rotateY(180deg);
        }

擴展

1. 增加立體效果：改變旋轉的基點怖糊，且在旋轉的同時平移颇象。

        .flip{
            position: relative;
            transition: all 1s;
            transform-origin:0% 50%;
            -webkit-transform-origin:0% 50%;
            -ms-transform-origin:0% 50%;
            -moz-transform-origin:0% 50%;
            -o-transform-origin:0% 50%;
        }
        .wrap:hover .flip{
            transform: translate(400px,0px) rotateY(180deg);
            -webkit-transform:  translate(400px,0px) rotateY(180deg);
            -ms-transform:translate(400px,0px) rotateY(180deg);
            -moz-transform:translate(400px,0px) rotateY(180deg);
            -o-transform: translate(400px,0px) rotateY(180deg);
        }

2. 點擊旋轉：給container增加正面/背面類名伍伤，通過判斷是否含有相應類名來更改類名，實現(xiàn)翻面夯到。

    function turn(){
        $(".wrap").hasClass("wrap-front")?$(".wrap").removeClass("wrap-front").addClass("wrap-back"):$(".wrap").removeClass("wrap-back").addClass("wrap-front");
    }

參考文章：

https://segmentfault.com/a/1190000003903190?_ea=423493