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

回転フリップ効果の CSS アニメーション、具体的な内容は次のとおりです。

1. まず2つのボックスのサイズや色などを設定し、次に重なるように配置して、最後にアニメーションを設定します。

以下にいくつか例を挙げます。

<スタイル>
        。箱 {
            高さ: 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>
</本文>

2. 効果は以下のとおりです。

要約する

上記は、エディターが導入した回転フリップアニメーション効果の CSS 実装です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: Doubanウェブサイトのウェブサイトコンテンツに小さな変更を加える方法

>>: JDBC 接続 (MySQL への接続) の 6 ステップのサンプルコード