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

回転するフリップカードアニメーションの効果を実現する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 ステップのサンプル コード

推薦する

better-scrollプラグインのスライドできないバグについて(2021年プラグインで解決)

より良いスクロールの原則親コンテナーであるため、ラッパーの高さはコンテンツのサイズに応じて増加します...

MySQL 8.0はJSONを扱えるようになりました

目次1. 概要2. JSON基本ツール3. JSONパス式4. JSONを検索して変更する序文:長い...

概要ページでのフロートとクリアフロート

1. フロート: 主な目的は、テキストを画像の周囲に折り返す効果を実現することです。また、複数列レイ...

Vue でスクロールバーのスタイルを変更する方法

目次まず、スクロール バーのスタイルを変更するには、疑似要素-webkit-scrollbarを使用...

MySQL 8 の新機能: 非表示のインデックス

背景インデックスは諸刃の剣です。クエリ速度は向上しますが、DML 操作も遅くなります。結局のところ、...

Windows での MySQL インストール チュートリアル (画像とテキスト付き)

MySQL インストール手順 MySQL は、スウェーデンの MySQL AB によって開発された...

ElementUIテーブルのヘッダーアイコンにフローティングプロンプトを追加します。

この記事では主に、ElementUI テーブルのヘッダー アイコンにフローティング プロンプトを追加...

vue で wangEditor を使用する方法と、データをエコーし​​てフォーカスを取得する方法

バックグラウンド管理プロジェクトを行う際には、リッチテキストエディタがよく使用されます。ここでは、非...

MySQLの日付と時刻関数の使用の概要

この記事はMySQL 8.0に基づいていますこの記事では、日付と時刻の操作のための MySQL 関数...

パーティクルダイナミックボタン効果を実現するCSS

オリジナルリンクhttps://github.com/XboxYan/no…ボタンは、おそらく We...

CSS シャドウアニメーションの最適化のヒント

このテクニックは、この記事から来ています - シルキーでスムーズなパフォーマンスでボックスシャドウを...

Vue.js と MJML でレスポンシブなメールを作成する

MJML は、開発者が美しく、応答性に優れ、あらゆるデバイスやメール クライアントで動作する魅力的な...

JavaScript で大きなファイルの並列ダウンロードを実装する方法

目次1. HTTP範囲リクエスト1.1 範囲構文2. 大きなファイルをダウンロードする方法2.1 補...

nginx ベースのブラウザネゴシエーションキャッシュプロセスの詳細な説明

この記事は主に、nginx に基づいてブラウザネゴシエーションキャッシュを設定する詳細なプロセスを紹...

js に基づいて大きなファイルのアップロードとブレークポイントの再開を管理する方法

目次序文フロントエンド構造バックエンド構造(ノード+エクスプレス) FormDataに基づくファイル...