Wie drehe ich eine 3D-CSS-Karte beim Hover nur mit CSS?

CSS-umdrehbarer 3D-Karteneffekt beim Schweben

In diesem Tutorial wollen wir einen 3D-Kartenumdrehungseffekt ausschließlich mit CSS erzielen. Die Karte dreht sich sanft von der Vorder- zur Rückseite, wenn man mit der Maus darüber fährt.

Code-Implementierung:

<code class="css">.card {
  position: relative;
  width: 50vh;
  height: 80vh;
  perspective: 500px;
  margin: 10vh auto 50vh;
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.front {
  background-color: #66ccff;
}

.back {
  background-color: #dd8800;
  transform: rotateY(180deg);
}

.card:hover .front {
  transform: rotateY(180deg);
}

.card:hover .back {
  transform: rotateY(360deg);
}</code>

Erklärung:

1. Wir beginnen mit der Definition einer Containerklasse .card mit der gewünschten Höhe, Breite und Perspektive.
2. Im .card-Container erstellen wir zwei untergeordnete Elemente: .front und .back um die Vorder- und Rückseite der Karte darzustellen.
3. Wir positionieren sowohl .front als auch .back absolut innerhalb des .card-Containers und stellen ihre Abmessungen auf 100 % Breite und Höhe ein.
4. Wir bewerben uns ein Übergang zur Transformationseigenschaft beider Elemente, um eine sanfte Drehung beim Schweben zu ermöglichen.
5. Um ein Flackern während der Flip-Animation zu verhindern, setzen wir backface-visibility auf „hidden“ und transform-style auf „preserve-3d“.
6. Zunächst wird die Rückseite entlang der Y-Achse um 180 Grad gedreht, indem wir transform:rotateY(180deg); verwenden.
7. Beim Schweben drehen wir die Vorderseite um 180 Grad und die Rückseite um 360 Grad, um den Vorgang abzuschließen umdrehen.

Das obige ist der detaillierte Inhalt vonWie drehe ich eine 3D-CSS-Karte beim Hover nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!