フロントエンド開発者の必須科目である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つだけ保持します
Web デザインは、インターネットの出現後に誕生した新興の周辺産業です。 Web ページは店頭のよう...
アーティストになるつもりがない場合は、開発者として HTML を読んで、必要に応じて簡単な変更を加え...
Vue画像拡大鏡コンポーネントパッケージに基づいて、参考までに具体的な内容は次のとおりです。画像拡大...
偶然、プロジェクト内でVue.$setが無効であることがわかりましたデータ フィルタリングを追加する...
データ表示は、常にあらゆる職業の人々が求めているものです。特にフロントエンド開発業界では、データを表...
1. まずリクエスト設定ファイルを見て、axios.createメソッドを見てください。baseUR...
目次導入1. 事例の概要2. 環境の展開3. Nginxホストのインストール4. Tomcatのイン...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
日常的なウェブサイトの保守と管理では、多くの SQL ステートメントが使用されます。熟練して使用する...
1. インデックスの役割一般的なアプリケーション システムでは、読み取りと書き込みの比率は約 10:...
複数の条件を持つ MySQL クエリ環境: MySQL 5.7 where ステートメントに複数の ...
目次導入例要約する導入$属性すべての親コンポーネントのプロパティを継承します (props を通じて...
Dockerのインストール カール -fsSL https://get.docker.com -o...
テーブルはいつ使用されますか?最近では、Web ページの全体的なレイアウトにテーブルが使用されること...
序文Deepin のユーザー インターフェイスは、使用時に非常に見栄えがします。インターフェイス効果...