回転するフリップカードアニメーションの効果を実現するCSS

<スタイル>
        。箱 {
            高さ: 300px;
            幅: 300ピクセル;
            位置: 相対的;
        }
        
        .zh,
        。ファン {
            高さ: 300px;
            幅: 300ピクセル;
            行の高さ: 300px;
            フォントサイズ: 30px;
            テキスト配置: 中央;
            色: 青;
            遷移: すべて 2;
            背面の可視性: 非表示;
            /* 裏面は見えません */
            位置: 絶対;
            上: 0;
            左: 0;
        }
        
        .zh {
            背景色: 水色;
        }
        
        。ファン {
            背景色: アクアマリン;
            変換: rotateY(-180deg) rotateZ(-180deg);
        }
        
        .box:hover .zh {
            変換: 回転Y(180度) 回転Z(180度)
        }
        
        .box:hover .fan {
            変換: rotateY(0) rotateZ(0);
        }
    </スタイル>
</head>

<本文>
    <div class="box">
        <div class="zh">前面</div>
        <div class="fan">戻る</div>

    </div>
</本文>