卡牌翻轉的步驟：

1.最外層wrap設定檢視距離perspective:800px;相對定位position: relative

2.父級#box設定轉換為3d效果transform-style:preserve-3d;

3.旋轉元素設定：背景不透視  backface-visibility: hidden;rotateY為0

4.另一個旋轉元素：rotateY為180deg

程式碼如下：

html部分

<div id="wrap">
        <div id="box">
            <p>世界那麼大</p>
            <p>我想去看看</p>
        </div>
    </div>
 

#wrap {width: 600px;height: 600px;background: #ccc; margin: 0 auto;position: relative;perspective:800px;}
    #box {position: absolute;left: 100px;width: 400px;height: 400px;border: 1px solid #000;transform-style:preserve-3d; }
    #box p {width: 100%;height: 100%;position: absolute;left: 0;top: 0;font-size: 28px; backface-visibility: hidden;color: #fff}
    #box p:nth-of-type(1) {background: blue;transition:.8s transform}
    #box p:nth-of-type(2) {background: red;transform:rotateY(-180deg);transition:.8s transform}
    #box:hover p:nth-of-type(1) {transform:rotateY(180deg);}
    #box:hover p:nth-of-type(2) {transform:rotateY(0deg);}