|
La création d'un widget de carte à rabat Bootstrap implique d'utiliser le recto et le verso d'une structure en forme de carte. Voici comment en créer un :
Structure HTML :
```html
... Contenu de la face avant ...
```
Style CSS :
```css
.flip-card {
largeur :250 px ;
hauteur :250px;
perspective :1000px; /* Crée un effet 3D */
}
.flip-card-inner {
position :relative;
largeur :100 %;
hauteur :100 %;
alignement du texte :centre ;
transition :transformation 0,8 s ;
style de transformation :préserver-3d ;
}
.flip-card-front,
.retourner la carte {
position :absolue;
largeur :100 %;
hauteur :100 %;
visibilité arrière :cachée ;
}
.retourner la carte {
transformation :rotationY(180deg);
}
```
Interaction avec JavaScript :
Pour activer la fonctionnalité de retournement, vous pouvez utiliser des écouteurs d'événements JavaScript (par exemple, sur un clic de souris) et manipuler la propriété `transform` de l'élément `.flip-card-inner` pour effectuer la transition entre le recto et le verso de la carte.
Par exemple, voici comment vous pouvez implémenter la fonctionnalité flip à l'aide de jQuery :
```javascript
$(document).ready(() => {
$(".flip-card").on("clic", function () {
$(this).find(".flip-card-inner").toggleClass("retourné");
});
});
```
Ce code JavaScript écoute les clics sur l'élément `.flip-card` et active la classe `inversée` sur l'élément `.flip-card-inner`. La classe « flipped » peut être définie en CSS pour effectuer l'animation de retournement.
En combinant la structure HTML, le style CSS et l'interaction JavaScript, vous pouvez créer un widget de carte à retourner Bootstrap qui permet aux utilisateurs de basculer entre le recto et le verso de la carte.
|
