Come creare: Scatola a ribalta 3D

Impara come creare una scatola a ribalta utilizzando CSS.

Come creare una scatola a ribalta

Passo 1 - Aggiungi HTML：

<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>Lato posteriore</h2>
    </div>
  </div>
</div>

Secondo passo - Aggiungere CSS:

/* Contenitore della scatola ribaltabile - impostare la larghezza e l'altezza desiderate. Abbiamo aggiunto l'attributo border per dimostrare che quando il mouse è sopra, la ribaltamento stessa supera la scatola (se non si desidera l'effetto 3D, rimuovere la perspective) */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Se non si desidera l'effetto 3D, rimuovere questa riga */
}
/* Questo contenitore viene utilizzato per posizionare il frontale e il retro */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* Quando il mouse si muove sul contenitore della scatola a ribalta, eseguire una ribaltamento orizzontale */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
/* Posizionare il frontale e il retro */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* Impostare lo stile del frontale */
.flip-box-front {
  background-color: #bbb;
  color: black;
}
/* Impostare lo stile del retro */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

Prova personalmente

trasformazione verticale

Per effettuare una trasformazione verticale invece di quella orizzontale, utilizzare rotateX metodo invece di rotateY:

Esempio

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

Prova personalmente

Attenzione:Questi esempi potrebbero non funzionare correttamente su tablet e/o smartphone.

Pagine correlate

Tutorial:Conversione 2D CSS

Tutorial:Conversione 3D CSS