Hoe te maken: kaart omdraaien

Hoe een kaart omdraaien te maken

Stap 1 - Voeg HTML toe:

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="img_avatar.png" alt="Avatar" style="breedte:300px;hoogte:300px;">
    </div>
    <div class="flip-card-back">
      <h1>Bill Gates</h1>
      <p>Architect & Ingenieur</p>
      <p>Wij houden van die man</p>
    </div>
  </div>
</div>

Tweede stap - Voeg CSS toe:

/* Container voor het omdraaien van de kaart - stel de gewenste breedte en hoogte in. We hebben de rand-eigenschap toegevoegd om te demonstreren dat het omdraaien bij hover buiten de container valt (verwijder de perspectief als u geen 3D-effect wilt) */
.flip-card {
  achtergrondkleur: transparent;
  breedte: 300px;
  hoogte: 200px;
  rand: 1px solide #f1f1f1;
  uitzicht: 1000px; /* Als u geen 3D-effect wilt, verwijder dit dan */
}
/* Deze container wordt gebruikt voor het positioneren van de voorkant en achterkant */
.flip-card-inner {
  positie: relatief;
  breedte: 100%;
  hoogte: 100%;
  tekst-uitlijning: center;
  overgang: transform 0.8s;
  transform-stijl: behoud-3d;
}
/* Bij het hoveren op de kaart wordt deze horizontaal omgedraaid */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
/* Positioneren van de voorkant en achterkant */
.flip-card-front, .flip-card-back {
  positie: absoluut;
  breedte: 100%;
  hoogte: 100%;
  -webkit-backface-visibility: verborgen; /* Safari */
  backface-visibility: verborgen;
}
/* Stijl instellen van de voorkant (indien afbeelding ontbreekt, wordt dit als reserve gebruikt) */
.flip-card-front {
  achtergrondkleur: #bbb;
  kleur: zwart;
}
/* Stijl instellen van de achterkant */
.flip-card-back {
  achtergrondkleur: dodgerblauw;
  kleur: wit;
  transform: rotateY(180deg);
}

Try it yourself