簡単な手順で純粋な CSS3 で 3D 反転効果を実現

簡単な手順で純粋な CSS3 で 3D 反転効果を実現

フロントエンド開発者の必須科目である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を教える記事

アーティストになるつもりがない場合は、開発者として HTML を読んで、必要に応じて簡単な変更を加え...

Vue画像拡大鏡コンポーネントのカプセル化と使用方法の詳細な説明

Vue画像拡大鏡コンポーネントパッケージに基づいて、参考までに具体的な内容は次のとおりです。画像拡大...

Vue.$set の失敗の落とし穴の発見と解決

偶然、プロジェクト内でVue.$setが無効であることがわかりましたデータ フィルタリングを追加する...

Vue で円形プログレスバーを実装する例

データ表示は、常にあらゆる職業の人々が求めているものです。特にフロントエンド開発業界では、データを表...

Vue-Element-Adminはログインジャンプを実現するために独自のインターフェースを統合しています

1. まずリクエスト設定ファイルを見て、axios.createメソッドを見てください。baseUR...

Nginx+Tomcat 負荷分散クラスタの実装例

目次導入1. 事例の概要2. 環境の展開3. Nginxホストのインストール4. Tomcatのイン...

マークアップ言語 - 画像の置き換え

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

MySQL コマンドラインでよく使われる 18 個のコマンド

日常的なウェブサイトの保守と管理では、多くの SQL ステートメントが使用されます。熟練して使用する...

MySQLインデックスの使用に関するヒントと注意事項

1. インデックスの役割一般的なアプリケーション システムでは、読み取りと書き込みの比率は約 10:...

複数の条件を持つ MySQL クエリ メソッド

複数の条件を持つ MySQL クエリ環境: MySQL 5.7 where ステートメントに複数の ...

Vue で $attrs と $listeners を使用するチュートリアル

目次導入例要約する導入$属性すべての親コンポーネントのプロパティを継承します (props を通じて...

HTMLテーブルレイアウトの実践的な使い方の詳しい説明

テーブルはいつ使用されますか?最近では、Web ページの全体的なレイアウトにテーブルが使用されること...

VMware15 の Deepin インストール詳細チュートリアル (画像とテキスト)

序文Deepin のユーザー インターフェイスは、使用時に非常に見栄えがします。インターフェイス効果...