CSSで反転効果を実現する方法

CSS で反転効果を実現する方法: 最初にデモンストレーション ブロックを作成し、そこにトランジション属性とトランスフォーム属性を追加します。次に、反転する必要がある p にトランジション属性を追加します。最後にパースペクティブとトランスフォームを追加します。 -style 属性。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター

フロントエンド開発者向けの必修科目として、 CSS3 で理解できる基本的なアニメーション効果はたくさんあります。今回は、CSS3 を使用してホバーフリップ効果を実現します~

最初のステップは非常に簡単です。デモンストレーション用の四角形を描画し、トランジションとトランジションを追加するだけです。属性を変換します:

// 本示例均使用Sass语法
.block {
  width: 200px;
  height: 200px;
  background: brown;
  cursor: pointer;
  transition: 0.8s;
  &:hover {
    transform: rotateY(180deg);
  }
}

このときの効果を見てみましょう:

ここで注意する必要があるのは次のとおりです:

transition 属性は、hover ではなく On .block に記述する必要があります。、ホバー時にトランジションのみを記述すると、マウスが外に出たときにトランジション効果はありません。ホバー時にトランジションのみを記述する場合:

2 番目のステップはより重要です。常に 1 つの平面上で反転するだけでは十分な 3 次元ではないことが簡単にわかります。そのため、考え方を少し変える必要があります。—— Use 2 層の p ネスト

// html部分
<div class="block">
    <div class="block-in"></div>
</div>

// CSS部分
.block {
  width: 200px;
  height: 200px;
  cursor: pointer;
 
  &-in {
    background: brown;
    height: 100%;
    transition: 0.8s;
  }
  
  &:hover .block-in {
    transform: rotateY(180deg);
  }
}

現時点では次のように効果は変わっていません:

現時点では キーステップ 1

はここです: 必要です

遠近法と変換スタイルの属性 を外側のレイヤーに追加して、アニメーション全体に 3D 変形効果を追加します:

.block {
  width: 200px;
  height: 200px;
  cursor: pointer;
  /* 3D变形 */
  transform-style: preserve-3d;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
 
  &-in {
    background: brown;
    height: 100%;
    transition: 0.8s;
  }
 
  &:hover .block-in {
    transform: rotateY(180deg);
  }
}

最終的な効果は次のとおりです。

最後に アイデアをまとめましょう

:

1. 内側と外側に 2 つの p レイヤーを作成します。外側の層に反転変換を内側の層 p:rotateY(180deg)

2 に追加します。反転する必要がある p に、hover

# ではなく、transition 属性を追加することに注意してください。 ##3. 外側のレイヤー p に遠近法と変換スタイルの属性を追加して、最終的に 3D 反転効果を実現します

推奨学習: "

css ビデオ チュートリアル

"

以上がCSSで反転効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。