Wie man eine 3D-Kippbox erstellt

Lernen Sie, wie man eine Kippbox mit CSS erstellt.

Wie man eine Kippbox erstellt

Schritt 1 - HTML hinzufügen:

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Front Side</h2>
    </div>
    <div class="flip-box-back">
      <h2>Rückseite</h2>
    </div>
  </div>
</div>

Schritt 2 - Fügen Sie CSS hinzu:

/* Überlagerungsbox-Container - Stellen Sie die gewünschte Breite und Höhe ein. Wir haben das border-Attribut hinzugefügt, um zu demonstrieren, dass die Drehung beim Mausüberfahren über den Container hinausgeht (entfernen Sie perspective, wenn kein 3D-Effekt gewünscht wird) */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Entfernen Sie diese Zeile, wenn 3D-Effekte nicht benötigt werden */
}
/* Dieser Container wird zur Positionierung der Vorder- und Rückseite verwendet */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* Wird die Maus über den翻转盒容器 bewegt, wird eine horizontale Drehung durchgeführt */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
/* Positionierung der Vorder- und Rückseite */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* Stile für die Vorderseite einstellen */
.flip-box-front {
  background-color: #bbb;
  color: black;
}
/* Stile für die Rückseite einstellen */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

Probieren Sie es selbst aus

vertikale Drehung

Um eine vertikale Drehung anstatt einer horizontalen Drehung durchzuführen, verwenden Sie rotateX statt rotateY:

Beispiel

.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}
.flip-box-back {
  transform: rotateX(180deg);
}

Probieren Sie es selbst aus

Hinweis:Diese Beispiele funktionieren möglicherweise nicht ordnungsgemäß auf Tablets und/oder Smartphones.

Verwandte Seiten

Tutorials:CSS 2D-Transformation

Tutorials:CSS 3D-Transformation