フロントエンド開発者の必須科目であるCSS3は、多くの基本的なアニメーション効果を実現するのに役立ちます。今回は、CSS3を使用してホバーフリップ効果を実現します。 最初のステップは非常に簡単です。デモ ボックスを描画し、それにtransition プロパティと transform プロパティを追加するだけです。 // この例ではSass構文を使用しています。ブロック{ 幅: 200ピクセル; 高さ: 200px; 背景:茶色; カーソル: ポインタ; 遷移: 0.8 秒; &:ホバー{ 変換: rotateY(180deg); } } この時点での効果を見てみましょう: ここで注意すべき点は、 transition 属性は hover ではなく .block に記述する必要があることです。 transition on hover のみを記述すると、マウスが移動したときに遷移効果は発生しません。 transition on hover のみを記述すると、次のようになります。 2番目のステップはより重要です。常に1つの平面で反転されていることが簡単にわかりますが、これでは3次元性が不十分です。そのため、考え方を少し変える必要があります。divネストを2層使用します。 // html 部分 <div class="block"> <div class="block-in"></div> </div> // CSS 部分ブロック { 幅: 200ピクセル; 高さ: 200px; カーソル: ポインタ; &-で { 背景:茶色; 高さ: 100%; 遷移: 0.8 秒; } &:hover .ブロックイン { 変換: rotateY(180deg); } } 現時点では効果は以下のように変更されていません。 ここで重要なステップが始まります。アニメーション全体に 3D 変形効果を加えるために、外側のレイヤーにパースペクティブ属性と変換スタイル属性を追加する必要があります。 。ブロック { 幅: 200ピクセル; 高さ: 200px; カーソル: ポインタ; /* 3D変形 */ 変換スタイル: 3D を保持します。 -webkit-perspective: 1000; -moz-perspective: 1000; -ms-パースペクティブ: 1000; 視点: 1000; &-で { 背景:茶色; 高さ: 100%; 遷移: 0.8 秒; } &:hover .ブロックイン { 変換: rotateY(180deg); } } 最終的な効果は次のようになります。 最後に、私たちの考えをまとめます。 1. 内側と外側の 2 つの div レイヤーを作成します。マウスを外側のレイヤーの上に置くと、内側の div が transform: rotateY(180deg) で反転されます。 2. ホバーしているときではなく、反転する必要がある div に transition 属性を追加する必要があることに注意してください。 3. 外側のdivにパースペクティブ属性とトランスフォームスタイル属性を追加して、3D反転効果を実現します。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: JavaScript で Webpack を使用するチュートリアル
>>: MySQLデータベースは重複データを削除し、メソッドインスタンスを1つだけ保持します
テーブルが 2 つあり、テーブル A のレコードがテーブル B に存在しない可能性があります。左結合...
序文日常の開発では、サーバー上でさまざまなテキストやログの表示操作を実行する必要があることがよくあり...
デフォルトでは、 /etc/default/docker 設定は有効になりません。docker 環境...
1.Docer CEをインストールして使用するこの記事では、CentOS 7 を例に Docker ...
目次TypeScript環境の構築ステップ1: Taobaoミラーをダウンロードするステップ2: T...
質問があります。Dreamweaver で、3 行 1 列のログイン フォーム (ログイン、登録、パ...
Nginx の動的および静的分離の概要Nginx は静的処理能力が強力ですが、動的処理能力が不十分で...
序文最近、仕事で、MySQL ユーザーの権限を変更するには、特定の IP アドレスへのアクセスを制限...
参考までに、JavaScriptを使用してドロップダウンメニューを実装します。具体的な内容は次のとお...
目次複数テーブル結合の基本構文クロス結合と直積現象クロスコネクトデカルト積現象内部結合外部結合左外部...
目次原因:以下を実行します: 1. コンストラクター2.レンダリング機能3.bind関数とarrow...
ウェブ上でチャートを描くための 9 つの優れた JavaScript フレームワーク スクリプト 1...
1. 応用シナリオ親ページ a.jspサブページ b.jsp (ページ a に埋め込まれた ifra...
Vue コンポーネントは接続されているため、コンポーネント間で値を渡す必要があるのは避けられません...
1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...