Πώς να δημιουργήσετε: κάρτα-στροφή

Μάθετε πώς να δημιουργήσετε κάρτες-στροφή χρησιμοποιώντας CSS.

Παρακαλώ μετακινήστε το ποντίκι σας στην εικόνα που ακολουθεί:

Avatar
Bill Gates

Αρχιτέκτονας & Μηχανικός

Είμαστε ενθουσιασμένοι με αυτόν τον τύπο

Δοκιμάστε το προσωπικά

Πώς να δημιουργήσετε μια κάρτα-στροφή

Βήμα 1 - Προσθήκη HTML:

Καρτέλα-στροφή
  Εσωτερικό καρτέλας-στροφής
    Κατάληψη καρτέλας-στροφής
      <img src="img_avatar.png" alt="Avatar" style="πλάτος:300px;ύψος:300px;">
    </div>
    <div class="flip-card-back">
      <h1>Bill Gates</h1>
      <p>Αρχιτέκτονας & Μηχανικός</p>
      <p>Είμαστε αγαπητές αυτού του τύπου</p>
    </div>
  </div>
</div>

Δεύτερη Βήμα - Προσθήκη CSS:

/* Κουτί αναστροφής κάρτας - Ρυθμίστε το επιθυμητό πλάτος και ύψος. Προσθέσαμε την ιδιότητα border για να δείξουμε ότι η αναστροφή ξεπερνά το κουτί όταν είναι αναστροφή (Αν δεν θέλετε 3D αποτέλεσμα, αφαιρέστε την προοπτική) */
.flip-card {
  χρώμα-υποβάθρου: διαφανές;
  πλάτος: 300px;
  ύψος: 200px;
  περίγραμμα: 1px αθροιστικό #f1f1f1;
  πρόσοψη: 1000px; /* Αν δεν θέλετε 3D αποτέλεσμα, το αφαιρέστε */
}
/* Αυτό το κουτί χρησιμοποιείται για τη θέση μπροστινής και πίσω όψης */
.flip-card-inner {
  θέση: σχετική;
  πλάτος: 100%;
  ύψος: 100%;
  συγχρονισμός-tekst: κέντρο;
  μεταβίβαση: μετατροπή 0.8s;
  στυλ-μετατροπής: διατηρήση-3d;
}
/* Όταν το ποντίκι βρίσκεται πάνω από το κουτί αναστροφής κάρτας, γίνεται οριζόντια αναστροφή */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
/* Θέση μπροστινής και πίσω όψης */
.flip-card-front, .flip-card-back {
  θέση: αβέβαιη;
  πλάτος: 100%;
  ύψος: 100%;
  -webkit-backface-visibility: κρυφή; /* Safari */
  backface-visibility: κρυφή;
}
/* Ρύθμιση στυλ μπροστινής όψης (αν η εικόνα λείπει τότε εναλλακτικό) */
.flip-card-front {
  χρώμα-υποβάθρου: #bbb;
  χρώμα: μαύρο;
}
/* Ρύθμιση στυλ πίσω όψης */
.flip-card-back {
  χρώμα-υποβάθρου: dodgerblue;
  χρώμα: λευκό;
  transform: rotateY(180deg);
}

Δοκιμάστε το προσωπικά