Card con dos caras diferentes
En este como se hace vas a aprender a crear una tarjeta con dos caras diferentes, y que puede girar en 3D. Las típicas flip card o flahscards
En el ejemplo se usan dos imágenes, pero cada cara de la tarjeta puede tener el contenido que quieras: una puede ser una imagen y la otra una descripción, por ejemplo.
Puedes usarla como flashcards: una cara para una pregunta y la otra para un respuesta.
En el ejemplo el cambio de una cara a otra se realiza al psar el ratón por encima (hover). Todo se realiza con HTML y CSS, no es necesario Javascript.
El código completo
El contenido HTML es un simple bloque div contenedor para fijar los límites de la tarjeta.
Dentro tenemoas la tarjete propiamente dicha: un bloque div con dos bloques hijos, cada uno de los bloques hijos es una cara de la tarjeta.
<div class="cont">
<div class="doubleCard">
<div class="frontCard">
<img src="/imgs/coche1.png">
</div>
<div class="backCard">
<img src="/imgs/coche2.png">
</div>
</div>
</div>
Los estilos CSS son muy simples, lo fundamental es el giro alrededor del eje Y (eje vertical) en modo 3D y con una perspectiva que simule que vemos de lejos como gira la tarjeta y muestra una u otra cara.
El contenedor fija los límites del marco de giro y la perspectiva. Cuando el ratón pase por encima se produce el giro de la tarjeta (class doubleCard)
La tarjeta en si (doubleCard) tiene posición relativa para que las caras frontal y lateral se coloquen en forma absoluta dentro de este bloque. Posee una propiedad transition donde le marcamos el tiempo que emplea en girar, y que haga el giro con efecto 3D
Por último las carasa de la tarjeta cons dos bloques con posición absoluta, uno de ellos, la cara oculta, está girado 180º al rededor del ejeY. Ambos poseen back-visibility en hidden para que la segnada cara (back) no tape a la primera (front).
.cont{
perspective: 800px;
width: 350px;
height: 200px;
}
.doubleCard{
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.cont:hover .doubleCard{
transform: rotateY(180deg);
}
.frontCard, .backCard{
position: absolute;
backface-visibility: hidden;
top:0 ;
left: 0;
}
.backCard{
transform: rotateY(180deg)
}
Esta card con dos caras puede tener una imagen en una cara y una explicación en la otra por ejemplo. Aquí a modo de muestra se usan dos imágenes, pero también puedes usar imágenes de fondo (background-image)