Wie erreicht man einen 3D-Kartenumdrehungseffekt nur mit CSS?

So drehen Sie eine 3D-Karte mit CSS um

Die Aufgabe besteht darin, nur mit CSS einen 3D-Kartenumdrehungseffekt zu erstellen, bei dem die Karte umgedreht wird vertikal beim Schweben.

Nur ​​CSS-Flip-Effekt

Um die Implementierung zu vereinfachen, verwenden wir den folgenden CSS-Code:

<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

Auf den Kartenbehälter wurde eine Perspektive angewendet, die ihm die Illusion eines 3D-Raums verleiht. Sowohl die Vorder- als auch die Rückseite sind absolut innerhalb des Behälters positioniert. Sie werden auch transformiert, um ihre Rückseiten zu verbergen und ihre 3D-Natur zu bewahren.

Wenn die Maus über die Karte fährt, finden die folgenden Transformationen statt:

• Die Vorderseite dreht sich um 180 Grad die Y-Achse, wodurch die Rückseite sichtbar wird.
• Die Rückseite dreht sich um 360 Grad um die Y-Achse und vervollständigt so den Flip.

Diese reine CSS-Technik ermöglicht eine glatte und realistische Darstellung 3D-Kartenumdrehungseffekt beim Schweben.

Das obige ist der detaillierte Inhalt vonWie erreicht man einen 3D-Kartenumdrehungseffekt nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!