簡単な手順で純粋な 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つだけ保持します

推薦する

SQL の左結合と右結合の原理と例の分析

テーブルが 2 つあり、テーブル A のレコードがテーブル B に存在しない可能性があります。左結合...

Linux でテキストを表示するためのヒント (非常に実用的!)

序文日常の開発では、サーバー上でさまざまなテキストやログの表示操作を実行する必要があることがよくあり...

Docker: /etc/default/docker の DOCKER_OPTS パラメータを変更しても反映されない

デフォルトでは、 /etc/default/docker 設定は有効になりません。docker 環境...

Linux での Docker と portainer の設定方法

1.Docer CEをインストールして使用するこの記事では、CentOS 7 を例に Docker ...

TypeScript 環境を構築して VSCode にデプロイする詳細な手順

目次TypeScript環境の構築ステップ1: Taobaoミラーをダウンロードするステップ2: T...

HTMLテーブルではテーブルの外側の境界線のみが表示されます

質問があります。Dreamweaver で、3 行 1 列のログイン フォーム (ログイン、登録、パ...

Nginx+Apache の動的および静的分離の導入の詳細な例

Nginx の動的および静的分離の概要Nginx は静的処理能力が強力ですが、動的処理能力が不十分で...

MySQLアカウントのIP制限条件を変更する方法

序文最近、仕事で、MySQL ユーザーの権限を変更するには、特定の IP アドレスへのアクセスを制限...

ドロップダウンメニュー効果を実現するJavaScript

参考までに、JavaScriptを使用してドロップダウンメニューを実装します。具体的な内容は次のとお...

MySQL の結合クエリとサブクエリの問題

目次複数テーブル結合の基本構文クロス結合と直積現象クロスコネクトデカルト積現象内部結合外部結合左外部...

Reactでのこのリファレンスの詳細な説明

目次原因:以下を実行します: 1. コンストラクター2.レンダリング機能3.bind関数とarrow...

ウェブ上でチャートを描くための 9 つの優れた JavaScript フレームワーク スクリプト

ウェブ上でチャートを描くための 9 つの優れた JavaScript フレームワーク スクリプト 1...

親ページの更新を制御するために HTML で iframe を実装するためのアイデアとコード

1. 応用シナリオ親ページ a.jspサブページ b.jsp (ページ a に埋め込まれた ifra...

値の転送を実現するために、2つの同じレベルのコンポーネントをVueで作成します。

Vue コンポーネントは接続されているため、コンポーネント間で値を渡す必要があるのは避けられません...

HTML でスクロールバーを非表示にしたり削除したりする方法

1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...