TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear el widget Bootstrap Flip Card?

116

Bootstrap tiene un maravilloso componente de tarjeta adecuado para dispositivos móviles. Hemos discutido las tarjetas Bootstrap y los tutoriales de diseño de tarjetas en nuestros artículos anteriores. El componente de tarjeta se puede utilizar en diferentes estilos. En este artículo, vamos a explicar cómo crear un widget de tarjeta flip Bootstrap.

El widget tiene una tarjeta frontal y una tarjeta trasera. Cuando coloca el mouse o toca en dispositivos móviles, el componente de la tarjeta frontal se volteará o girará para mostrar la cara posterior. Explicaremos el giro tanto en dirección horizontal como vertical.

Widget de tarjeta Flip Bootstrap horizontal

Cualquier widget de Bootstrap debe tener el CSS preliminar y los scripts vinculados en la página HTML. Puede utilizar los enlaces CDN o alojar los archivos por su cuenta. Consulte nuestra plantilla de inicio Bootstrap para obtener más detalles. Usaremos el enlace CDN para la versión Bootstrap 4.0 para nuestros ejemplos en este artículo.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

El widget tiene tres partes: frontal, posterior y el div imageflip principal. La transformación CSS se utiliza para rotar los lados 180 grados en el eje Y para crear un efecto de volteo horizontal.

Widget de volteo de tarjeta horizontal Bootstrap

A continuación se muestra el CSS completo para el widget de volteo horizontal :

.image-flip:hover .backside, .image-flip.hover .backside { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .image-flip:hover .frontside, .image-flip.hover .frontside { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .image-flip { margin-bottom:200px; width: 300px; height: 250px; } .mainflip { -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -ms-transition: 1s; -moz-transition: 1s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: relative; } .frontside, .backside { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -moz-transition: 1s; -moz-transform-style: preserve-3d; -o-transition: 1s; -o-transform-style: preserve-3d; -ms-transition: 1s; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } .frontside { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); z-index: 2; } .backside { background: white; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); } .card, .card-img-top { border-radius: 0; }

HTML para Bootstrap Flip Widget

Simplemente insertamos dos componentes de la tarjeta, uno dentro del div frontal y el otro dentro del div backside.

<div class="image-flip" ontouchstart="this.classList.toggle('hover');"> <div class="mainflip"> <div class="frontside"> <div class="card" style="width:20rem;"> <img class="card-img-top img- fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> </div> </div> </div> <div class="backside"> <div class="card" style="width:20rem;"> <div class="card-header"> This is a Header </div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card component with header and footer.</p> <a href="#" class="btn btn-info btn-md">Info Button</a> </div> <div class="card-footer"> This is a Footer </div> </div> </div> </div> </div>

El código completo del widget

Poniendo CSS y HTML juntos, el código completo debería verse como a continuación:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <style type="text/css"> .image-flip:hover .backside, .image-flip.hover .backside { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .image-flip:hover .frontside, .image-flip.hover .frontside { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .image-flip { margin-bottom:200px; width: 300px; height: 250px; } .mainflip { -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -ms-transition: 1s; -moz-transition: 1s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: relative; } .frontside, .backside { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -moz-transition: 1s; -moz-transform-style: preserve-3d; -o-transition: 1s; -o-transform-style: preserve-3d; -ms-transition: 1s; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } .frontside { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); z-index: 2; } .backside { background: white; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); } .card, .card-img-top { border-radius: 0; } </style> </head> <body> <div class="image-flip" ontouchstart="this.classList.toggle('hover');"> <div class="mainflip"> <div class="frontside"> <div class="card" style="width:20rem;"> <img class="card-img-top img- fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> </div> </div> </div> <div class="backside"> <div class="card" style="width:20rem;"> <div class="card-header"> This is a Header </div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card component with header and footer.</p> <a href="#" class="btn btn-info btn-md">Info Button</a> </div> <div class="card-footer"> This is a Footer </div> </div> </div> </div> </div> </body> </html>

Creación de un giro de tarjeta vertical

En el código CSS personalizado, hemos utilizado rotateY (180deg) para crear un efecto de volteo horizontal. Simplemente cambie todas las apariciones de rotateY por rotateX. Simplemente cambiará la fuente y las partes posteriores para rotar en dirección vertical como se muestra a continuación:

Widget de volteo de tarjeta vertical Bootstrap

Fuente de grabación: www.webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More