純粋な CSS を使用して 3D 回転効果を実装するサンプル コード

<本文>
    <div class="box">
        <div class="正面">
            <h2>前面</h2>
        </div>
        <div class="face back">
            <h2>戻る</h2>
        </div>
    </div>
</本文>

*{
    マージン: 0;
    パディング: 0;
}

体{
    幅: 100%;
    高さ：100vh;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    背景: #333;
}

。箱{
    幅: 300ピクセル;
    高さ: 400px;
    変換スタイル: 3D を保持します。
    位置: 相対的;
}

。顔{
    位置: 絶対;
    左: 0;
    上: 0;
    幅: 100%;
    高さ: 100%;
    変換スタイル: 3D を保持します。
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    背面の可視性: 非表示;
    遷移: 2 秒のイーズインアウト;
    変換: 視点(500px)、Y方向回転(0度);
}

.face.front{
    背景: #ff0;
}

.face.back{
    背景: #3bc2ff;
    色: #fff;
    変換: 視点(500px) Y方向回転(180度);
}

.box:hover .face.front{
    変換: 視点(500px) Y方向回転(180度);
}

.box:hover .face.back{
    変換: 視点(500px) Y方向回転(360度);
}

.box .face h2{
    フォントサイズ: 4em;
    テキスト変換:大文字;
    変換: perspective(500px) translateZ(50px);
}