回転フリップ効果の 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 ステップのサンプル コード
目次1. コンテナ相互接続を実現するためにネットワークをカスタマイズする2. ネットワーク接続1. ...
静的ファイルNginx は高いパフォーマンスで知られており、フロントエンドのリバース プロキシ サー...
目次概要意味インスタンスメソッドプリミティブ型とインスタンスオブジェクト間の自動変換カスタムメソッド...
今日、私の同僚が MYSQL クエリ ステートメントの作成時に非常に奇妙な問題に遭遇しました。MyS...
初心者の Linux ユーザーとして、私は単純なgcc/g++操作を何度も使用してきましたが、少し複...
1. はじめにロケーション命令は、http モジュールのコア構成です。事前に定義された URL マッ...
データベースの読み取りと書き込みの分離は、トラフィック量の多い大規模システムやインターネット アプリ...
古いバージョンをアンインストールする以前に古いバージョンをインストールしたことがある場合は、まずそれ...
アイデア:外側のボックスは背景を設定し、内側のボックスは背景の幅と高さを設定し、ボックスを動かすアニ...
一つの目的Html ページでローカル フォルダーを選択すると、フォルダーとそのサブフォルダー内のすべ...
HTML+CSS 1. WEB 標準と W3C の理解と知識<br /> タグを閉じ、小...
重要な注意: この記事を読む前に、Docker コンテナに関する知識と、一般的な Docker 操作...
最近、MySQL を使っています。Linux での mysql-installation という記事...
冒頭にこう書かれています:アブソリュートは言った。「親戚よ、私はあなたを私の人生で見たくない!」なぜ...
ページを作成するときに、ページの見栄えを良くするために、背景画像を設定する必要があることがよくありま...