LabEx
LoginBeitreten

Erstelle eine rotierende Karte mit CSS

Beginner

This tutorial is from open-source community. Access the source code

Einführung

In diesem Lab werden wir das Konzept des Erstellens einer rotierenden Karte mit CSS erkunden. Ziel dieses Labs ist es, Ihnen zu beibringen, wie Sie ein interaktives und ansprechendes Benutzeroberflächenelement erstellen, das zur Anzeige von Informationen oder Bildern verwendet werden kann. Am Ende dieses Labs werden Sie eine solide Vorstellung davon haben, wie Sie CSS verwenden, um dynamischen und visuell ansprechenden Web-Inhalt zu erstellen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 91% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Rotierende Karte

index.html und style.css wurden bereits in der VM bereitgestellt.

Um eine zweiseitige Karte zu erstellen, die beim Hovern rotiert, folgen Sie diesen Schritten:

  1. Legen Sie die backface-visibility der Karten auf none fest, um zu verhindern, dass die Rückseite standardmäßig sichtbar ist.
  2. Initial legen Sie rotateY(-180deg) für die Rückseite der Karte und rotateY(0deg) für die Vorderseite der Karte fest.
  3. Beim Hovern legen Sie rotateY(180deg) für die Vorderseite der Karte und rotateY(0deg) für die Rückseite der Karte fest.
  4. Legen Sie einen passenden Perspektivwert fest, um den Rotiereffekt zu erzeugen.

Hier ist ein Beispiel für HTML- und CSS-Code:

<div class="card">
  <div class="card-side front">
    <div>Front Seite</div>
  </div>
  <div class="card-side back">
    <div>Rückseite</div>
  </div>
</div>

.card {
  perspective: 150rem;
  position: relative;
  height: 40rem;
  max-width: 400px;
  margin: 2rem;
  box-shadow: none;
  background: none;
}

.card-side {
  height: 35rem;
  border-radius: 15px;
  transition: all 0.8s ease;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  padding: 2rem;
  color: white;
}

.card-side.back {
  transform: rotateY(-180deg);
  background: linear-gradient(43deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
}

.card-side.front {
  background: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
}

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

.card:hover.card-side.back {
  transform: rotateY(0deg);
}

Klicken Sie bitte in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite zu Vorschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Rotierende-Karte-Lab abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.