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

推薦する

Dockerカスタムネットワーク実装

目次1. コンテナ相互接続を実現するためにネットワークをカスタマイズする2. ネットワーク接続1. ...

Nginx 静的サービス設定の詳細な説明 (ルートとエイリアスの指示)

静的ファイルNginx は高いパフォーマンスで知られており、フロントエンドのリバース プロキシ サー...

JSパッケージオブジェクトに関する簡単な説明

目次概要意味インスタンスメソッドプリミティブ型とインスタンスオブジェクト間の自動変換カスタムメソッド...

MySQL の条件文で 1 つの情報しか読み取れない問題に対する 2 つの解決策

今日、私の同僚が MYSQL クエリ ステートメントの作成時に非常に奇妙な問題に遭遇しました。MyS...

Linux で g++ を使用してプログラムをコンパイルする際の -I (大文字の i)、-L (大文字の l)、-l (小文字の l) の機能の詳細な説明

初心者の Linux ユーザーとして、私は単純なgcc/g++操作を何度も使用してきましたが、少し複...

Nginx ロケーション ディレクティブ URI マッチング ルールの詳細な概要

1. はじめにロケーション命令は、http モジュールのコア構成です。事前に定義された URL マッ...

MySql マスタースレーブレプリケーションの実装原理と構成

データベースの読み取りと書き込みの分離は、トラフィック量の多い大規模システムやインターネット アプリ...

Ubuntu 18.04 (コミュニティ エディション) に Docker CE をインストールする方法

古いバージョンをアンインストールする以前に古いバージョンをインストールしたことがある場合は、まずそれ...

流れと動的なライン効果を実現する純粋なCSSコード

アイデア:外側のボックスは背景を設定し、内側のボックスは背景の幅と高さを設定し、ボックスを動かすアニ...

ローカル フォルダー内の画像を読み込んで表示するための HTML サンプル コード

一つの目的Html ページでローカル フォルダーを選択すると、フォルダーとそのサブフォルダー内のすべ...

フロントエンドの面接の質問の最も包括的なコレクション

HTML+CSS 1. WEB 標準と W3C の理解と知識<br /> タグを閉じ、小...

Spring Boot のパッケージ化と Docker リポジトリへのアップロードの詳細な手順

重要な注意: この記事を読む前に、Docker コンテナに関する知識と、一般的な Docker 操作...

CentOS 7 で rpm パッケージを使用して MySQL 5.7.18 をインストールする

最近、MySQL を使っています。Linux での mysql-installation という記事...

CSSの絶対と相対について

冒頭にこう書かれています:アブソリュートは言った。「親戚よ、私はあなたを私の人生で見たくない!」なぜ...

CSSで背景ぼかしを設定する方法

ページを作成するときに、ページの見栄えを良くするために、背景画像を設定する必要があることがよくありま...