Estructura HTML :
```html
... Contenido del anverso ...
... Contenido del reverso ...
```
Estilo CSS :
```css
.tarjeta invertida {
ancho:250 px;
altura:250 píxeles;
perspectiva:1000px; /* Crear un efecto 3D */
}
.flip-card-interior {
posición:relativa;
ancho:100%;
altura:100%;
alineación de texto:centro;
transición:transformar 0,8 s;
estilo de transformación:preservar-3d;
}
.frente de tarjeta invertida,
.flip-card-back {
posición:absoluta;
ancho:100%;
altura:100%;
visibilidad de la cara posterior:oculta;
}
.flip-card-back {
transformar:rotarY (180 grados);
}
```
Interacción con JavaScript:
Para habilitar la funcionalidad de voltear, puede usar detectores de eventos de JavaScript (por ejemplo, al hacer clic con el mouse) y manipular la propiedad `transform` del elemento `.flip-card-inner` para realizar la transición entre el anverso y el reverso de la tarjeta.
Por ejemplo, así es como podrías implementar la funcionalidad flip usando jQuery:
```javascript
$(documento).listo(() => {
$(".flip-card").on("clic", función () {
$(this).find(".flip-card-inner").toggleClass("flipped");
});
});
```
Este código JavaScript escucha los clics en el elemento `.flip-card` y alterna la clase `flipped` en el elemento `.flip-card-inner`. La clase `flipped` se puede definir en CSS para realizar la animación de volteo.
Al combinar la estructura HTML, el estilo CSS y la interacción de JavaScript, puede crear un widget de tarjeta invertida Bootstrap que permite a los usuarios alternar entre el anverso y el reverso de la tarjeta.