Hur man skapar: 3D-vändbox

Lär dig hur man använder CSS för att skapa en vändbox.

Hur man skapar en vändbox

Steg 1 - Lägg till HTML:

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Fram sidan</h2>
    </div>
    <div class="flip-box-back">
      <h2>Bak sida</h2>
    </div>
  </div>
</div>

Steg 2 - Lägg till CSS:

/* Omslagskassbehållare - ställ in den önskade bredden och höjden. Vi har lagt till en kant för att demonstrera, när musen hålls över, överstiger vridningen självt boxen (ta bort perspective om du inte vill ha 3D-effekter) */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Ta bort denna rad om du inte behöver 3D-effekter */
}
/* Denna behållare används för att positionera framsidan och baksidan */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* När musen flyttas över vridkassen, utför en horisontell vridning */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
/* Positionera framsidan och baksidan */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* Ställ in stilen för framsidan */
.flip-box-front {
  background-color: #bbb;
  color: black;
}
/* Ställ in stilen för baksidan */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

Prova själv

vertikal vändning

För att göra en vertikal vändning istället för en horisontell vändning, använd rotateX metoden istället för rotateY：

Exempel

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

Prova själv

Observera:Dessa exempel kanske inte fungerar korrekt på en surfplatta och/eller mobiltelefon.

Relaterade sidor

Lär dig om:CSS 2D-omvandling

Lär dig om:CSS 3D-omvandling