Πώς να δημιουργήσετε το γραφικό στοιχείο καρτών Flip Bootstrap;

Η δημιουργία ενός γραφικού στοιχείου καρτών αναστροφής Bootstrap περιλαμβάνει τη χρήση του μπροστινού και του πίσω μέρους μιας δομής που μοιάζει με κάρτα. Δείτε πώς μπορείτε να δημιουργήσετε ένα:

Δομή HTML :

```html

```

Στυλ CSS :

```css

.flip-card {

πλάτος:250 px;

ύψος:250 px;

προοπτική:1000 px; /* Δημιουργία τρισδιάστατου εφέ */

}

.flip-card-inner {

θέση:σχετική;

πλάτος:100%;

ύψος:100%;

text-align:κέντρο;

μετάβαση:μετασχηματισμός 0,8s;

μετασχηματισμός-στυλ:διατήρηση-3d;

}

.flip-card-front,

.flip-card-back {

θέση:απόλυτη;

πλάτος:100%;

ύψος:100%;

backface-ορατότητα:κρυφό;

}

.flip-card-back {

μετασχηματισμός:rotateY(180deg);

}

```

Αλληλεπίδραση με JavaScript:

Για να ενεργοποιήσετε τη λειτουργία αναστροφής, μπορείτε να χρησιμοποιήσετε προγράμματα ακρόασης συμβάντων JavaScript (π.χ. με κλικ του ποντικιού) και να χειριστείτε την ιδιότητα «transform» του στοιχείου «.flip-card-inner» για μετάβαση μεταξύ του μπροστινού και του πίσω μέρους της κάρτας.

Για παράδειγμα, δείτε πώς μπορείτε να εφαρμόσετε το flip funcionalidad χρησιμοποιώντας το jQuery:

`` Javascript

$(document).ready(() => {

$(".flip-card").on("κλικ", συνάρτηση () {

$(this).find(".flip-card-inner").toggleClass("flipped");

});

});

```

Αυτός ο κώδικας JavaScript ακούει για κλικ στο στοιχείο ".flip-card" και εναλλάσσει την κλάση "flipped" στο στοιχείο ".flip-card-inner". Η κλάση «αναστροφή» μπορεί να οριστεί στο CSS για την εκτέλεση της αναστροφής κινούμενης εικόνας.

Συνδυάζοντας τη δομή HTML, το στυλ CSS και την αλληλεπίδραση JavaScript, μπορείτε να δημιουργήσετε ένα γραφικό στοιχείο αναδιπλούμενης κάρτας Bootstrap που επιτρέπει στους χρήστες να μετακινούνται μεταξύ της μπροστινής και της πίσω όψης της κάρτας.