Il problema principale nell'utilizzo delle card è la quantità di informazioni che possiamo inserire al loro interno: mai abbastanza.

Se osserviamo i vari template disponibili troviamo sempre delle rappresentazioni in cui il titolo è spesso Questo è un titolo e descrizioni Questa è una descrizione. Se per il titolo la lunghezza non è un problema, lo è di certo per la descrizione: è difficile ricapitolare, in poche parole, quello che la card rappresenta.

Possiamo però creare una trasformazione gestita interamente da CSS che, tramite un effetto ottico, farà sembrare la carta tridimensionale e ne mostrerà il lato B.

Il CSS di seguito, una volta settate le dimenioni e gli stili delle carte, ne imposta la proprietà backface-visibility a nascosta, in modo che l'elemento una volta girato non sia mostrato a video. Infine predispone una carta a faccia in su e una a faccia in giù. All'hover la prima carta ruoterà di 180, andando dunque a scomparire, la seconda ruoterà con un ritardo di 0.6s, dando appunto l'effetto di rotazione della carta.

<div class="flip-card">
    <div class="flip-card-inner">
        <div class="card flip-card-front">
          <!-- Contenuto A -->
        </div>
        <div class="card flip-card-back">
          <!-- Contenuto B -->
        </div>
    </div>
</div>

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 350px; 
  perspective: 1000px; 
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card-back {
  transform: rotateY(180deg);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}