So erzielen Sie einen Flip-Effekt in CSS

So erzielen Sie den Flip-Effekt in CSS: Erstellen Sie zunächst einen Demonstrationsblock und fügen Sie ihm Übergangs- und Transformationsattribute hinzu.

Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, DELL G3-Computer

Als erforderlicher Kurs für Front-End-Entwickler kann CSS3 uns dabei helfen, viele grundlegende dynamische Effekte zu vervollständigen wird CSS3 verwenden, um den Hover-Flip-Effekt zu erzielen.

Der erste Schritt ist sehr einfach. Wir zeichnen einfach einen Demonstrationsblock und fügen ihm Übergangs- und Transformationsattribute hinzu:

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

Lassen Sie uns jetzt einen Blick auf den Effekt werfen:

Hier

muss darauf geachtet werden: Das Übergangsattribut sollte auf den .block statt auf den Hover geschrieben werden Wenn der Übergang nur auf den Hover geschrieben wird, gibt es keinen Übergangseffekt, wenn die Maus bewegt wird Wenn wir den Übergang nur auf den Schwebebalken schreiben:

Der zweite Schritt ist kritischer: Wir können leicht feststellen, dass es nicht dreidimensional genug ist, immer auf einer Ebene zu blättern, also müssen wir unsere Denkweise leicht ändern -

Verwenden Sie 2 Ebenen der P-Verschachtelung

// 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);
  }
}

Der Effekt hat sich derzeit nicht wie folgt geändert:

Dieses Mal ist der

kritische Schritt da: Wir müssen Perspektive und Transformationsstilattribute hinzufügen zur äußeren Ebene, um der gesamten Animation einen 3D-Deformationseffekt hinzuzufügen:

.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);
  }
}

Der endgültige Effekt ist wie folgt:

Abschließend

fassen wir unsere Ideen zusammen:

1. Erstellen Sie zwei innere und äußere p Wenn die Maus über die äußere Ebene schwebt, fügen Sie eine Flip-Transformation zur inneren Ebene hinzu. Fügen Sie dem äußeren p Perspektiven- und Transformationsstilattribute hinzu, um schließlich den 3D-Flip-Effekt zu erzielen

Empfohlenes Lernen: „

CSS-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Flip-Effekt in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!