3D 反転効果を実現する純粋な CSS3 のコード例-CSSチュートリアル-php.cn

3D 反転効果を実現する純粋な CSS3 のコード例

不言

リリース： 2019-01-25 11:42:11

転載

4046 人が閲覧しました

この記事では、3D 反転効果を実現するためのコード例を紹介します。必要な方は参考にしてください。

フロントエンド開発者向けの必須コースとして、CSS3 は多くの基本的な動的効果を完成させるのに役立ちます。この号では、CSS3 を使用してホバーフリップ効果を実現します~

。最初のステップ これは非常に簡単です。デモブロックを描画し、そこにトランジションとトランスフォーム属性を追加するだけです。 :

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

ログイン後にコピー

この時点での効果を見てみましょう:

3D 反転効果を実現する純粋な CSS3 のコード例

ここで注意すべき点は次のとおりです。

遷移が hover にのみ記述される場合は、transition 属性を hover ではなく .block に記述する必要があります。マウスが外に移動すると機能しません。ホバー上にトランジションを記述するだけの場合:

2 番目のステップ##。 # はより重要です。平面上では常に 1 つのフリップであることが簡単にわかります。十分な三次元ではないため、考え方を少し変える必要があります - 3D 反転効果を実現する純粋な CSS3 のコード例 p ネストの 2 層を使用します

// html部分
<div>
    <div></div>
</div>

ログイン後にコピー

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

ログイン後にコピー

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

今回の

重要なステップ

はここです: する必要があります 3D 反転効果を実現する純粋な CSS3 のコード例遠近感と変換スタイル属性を

外側のレイヤーに追加して、アニメーション全体に 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. div の 2 つのレイヤーを内側と外側に作成し、マウスを移動します。外側のレイヤーが使用されている場合は、内側の div に反転変換を追加します。rotateY(180deg) )

2. ホバー時ではなく、反転する必要がある div にtransition属性を追加することに注意してください。最終的に3D反転効果を実現します。 3D 反転効果を実現する純粋な CSS3 のコード例