簡単な手順で純粋な 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 を応援していただければ幸いです。