Codebeispiel für reines CSS3 zur Erzielung eines 3D-Flip-Effekts

Der Inhalt dieses Artikels befasst sich mit dem Codebeispiel für reines CSS3, um einen 3D-Flip-Effekt zu erzielen. Ich hoffe, dass es für Sie hilfreich ist . .

Als Pflichtkurs für Front-End-Entwickler kann uns CSS3 dabei helfen, viele grundlegende dynamische Effekte zu vervollständigen. In dieser Ausgabe werden wir CSS3 verwenden, um den Hover-Flip-Effekt zu erzielen~

Der erste Schritt Es ist ganz 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);
  }
}

Schauen wir uns jetzt den Effekt an:

Was hier beachtet werden sollte

ist: Das Übergangsattribut sollte auf den .block statt auf den Hover geschrieben werdenWenn der Übergang nur ist Beim Hover wird es nicht funktionieren, wenn die Maus herausbewegt wird. Es gibt keinen Übergangseffekt, wenn wir den Übergang nur beim Hover schreiben:

Der zweiter SchrittDer Schlüsselvergleich: Wir können leicht feststellen, dass es immer 1 Flip auf einer Ebene ist, was nicht dreidimensional genug ist, also müssen wir unsere Denkweise leicht ändern – Verschachtelt mit 2 Schichten von p

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

rrreeDer Effekt hat sich zu diesem Zeitpunkt nicht geändert, wie folgt:

Zu diesem Zeitpunkt ist der

Schlüsselschritt da : Wir müssen der äußeren Ebene Perspektiv- und Transformationsstilattribute hinzufügen, um der gesamten Animation 3D hinzuzufügen. Transformationseffekt:

// CSS部分
.block {
  width: 200px;
  height: 200px;
  cursor: pointer;
 
  &-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 die Idee zusammen:

1. Erstellen Sie zwei div-Ebenen innen und außen und bewegen Sie den Mauszeiger auf. Wenn die äußere Ebene verwendet wird, fügen Sie eine Flip-Transformation zum inneren div hinzu: rotationY (180 Grad)
2. Achten Sie darauf, das Übergangsattribut dem Div hinzuzufügen, das gespiegelt werden muss, und nicht, wenn es schwebt.
3 Fügen Sie Perspektive und Transformationsstil zum äußeren Div-Attribut hinzu und erreichen Sie schließlich den 3D-Flip Wirkung

Das obige ist der detaillierte Inhalt vonCodebeispiel für reines CSS3 zur Erzielung eines 3D-Flip-Effekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!