Erzielen Sie mit reinem CSS3 in wenigen einfachen Schritten einen 3D-Flip-Effekt

Als Pflichtkurs für Frontend-Entwickler kann CSS3 uns dabei helfen, viele grundlegende Animationseffekte zu erzielen. In dieser Ausgabe werden wir CSS3 verwenden, um den Hover-Flip-Effekt zu erzielen ~

Der erste Schritt ist ganz einfach. Wir zeichnen einfach eine Demo-Box und fügen ihr Übergangs- und Transformationseigenschaften hinzu:

// Dieses Beispiel verwendet Sass syntax.block {
  Breite: 200px;
  Höhe: 200px;
  Hintergrund: braun;
  Cursor: Zeiger;
  Übergang: 0,8 s;
  &:schweben {
    transformieren: Y-Drehung (180 Grad);
  }
}

Schauen wir uns die Auswirkungen jetzt einmal an:

Hierbei ist zu beachten , dass das Übergangsattribut in .block und nicht in hover geschrieben werden sollte . Wenn Sie nur Übergang beim Hover schreiben, gibt es keinen Übergangseffekt, wenn die Maus herausbewegt wird. Wenn wir nur Übergang beim Hover schreiben:

Der zweite Schritt ist kritischer: Wir können leicht feststellen, dass es immer auf einer Ebene gespiegelt ist, was nicht dreidimensional genug ist. Daher müssen wir unser Denken leicht ändern - verwenden Sie zwei Ebenen der Div-Verschachtelung

// HTML-Teil <div class="block">
    <div Klasse="block-in"></div>
</div>

// CSS Teil.block {
  Breite: 200px;
  Höhe: 200px;
  Cursor: Zeiger;
 
  &-In {
    Hintergrund: braun;
    Höhe: 100%;
    Übergang: 0,8 s;
  }
  
  &:hover .block-in {
    transformieren: Y-Drehung (180 Grad);
  }
}

Die Wirkung bleibt vorerst unverändert und lautet:

Jetzt kommt der entscheidende Schritt : Wir müssen der äußeren Ebene perspektivische und transformierende Attribute hinzufügen, um der gesamten Animation einen 3D-Deformationseffekt zu verleihen:

.block {
  Breite: 200px;
  Höhe: 200px;
  Cursor: Zeiger;
  /* 3D-Verformung */
  Transformationsstil: 3D bewahren;
  -WebKit-Perspektive: 1000;
  -moz-Perspektive: 1000;
  -ms-Perspektive: 1000;
  Perspektive: 1000;
 
  &-In {
    Hintergrund: braun;
    Höhe: 100%;
    Übergang: 0,8 s;
  }
 
  &:hover .block-in {
    transformieren: Y-Drehung (180 Grad);
  }
}

Der endgültige Effekt ist wie folgt:

Abschließend fassen wir unsere Ideen zusammen :

1. Erstellen Sie zwei Div-Ebenen, eine innere und eine äußere. Wenn Sie mit der Maus über die äußere Ebene fahren, wird die innere Div mit transform: rotateY(180deg) gespiegelt.

2. Beachten Sie, dass Sie das Übergangsattribut dem Div hinzufügen sollten, das umgedreht werden muss, und nicht, wenn es schwebt.

3. Fügen Sie dem äußeren Div Perspektive- und Transform-Stil-Attribute hinzu, um einen 3D-Flip-Effekt zu erzielen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.