Flipcards con CSS - Oxygenados La comunidad
Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
Menu
post oxygen builder
img-4
CSS Entrada
Flipcards con CSS
Listado Tips CSS

Primera

Card Frontal
Card Posterior

Primera

Segunda

Card Frontal
Card Posterior

Segunda

Tercera

Card Frontal
Card Posterior

Tercera

Cuarta

Card Frontal
Card Posterior

Cuarta

Puedes configurar tus cards como desees, solo tienes que tener en cuenta la construcción de la estructura y por supuesto las clases.
En las imágenes de abajo se muestra la estructura de como van organizados los elementos y el código CSS para realizar esta animación.

En la imagen que se muestra de la estructura solo mostramos la correspondiente a dos cards, puedes añadir los que desees o incluso utilizar uno solo.
Observa como hay un contenedor(div) que es el primero de los que conforman el elemento Column (esto es opcional y depnderá del diseño), dentro de este hay otro div al que renombramos como card-primaria, se ha renombrado así para que coincida con el nombre de la clase para mallor claridad, por cada card y dentro de este segundo div renombrado a "card-primario" otros dos divs, el renombrado a "car-frontal"  es el que aparecerá por defecto desapareciendo cuando el puntero del mouse se ponga encima y dando paso al segundo div el llamado "card-posterior", puedes renombrarlos, o no, como quieras, este solo es para facilitar la explicación.
Así, dentro del card-primario y del secundario puedes meter lo que te convenga para tu diseño, no hay nada mas que tener en cuenta.

Lo siguiente será añadir un elemento Code-Bolck en que se pegará el código que abajo se muestra, también puedes pegarlo en una hoja de estilos, aunque somos mas partidarios de poner en un Code-Block todos los códigos que no sea vayan a utlizar en múltiples páginas, de esta manera solo se cargará en la página en la que utilices los cards y no influirá en la velocidad y rendimiento de manera generalizada en las otras páginas del sito.

img-7
.card-primaria {
    position: relative;
}

.card-frontal,
.card-posterior {
    transition: 1s all ease-in-out;
    backface-visibility: hidden;
}

.card-frontal {
    transform: rotateY(0deg);
    transform-style: preserve-3d;
}

body:not(.ng-scope) .card-posterior {
    position: absolute;
    transform: rotateY(180deg);
    transform-style: preserve-3d;
}

body:not(.ng-scope) .card-primaria:hover .card-frontal {
    transform: rotateY(-180deg);
}

body:not(.ng-scope) .card-primaria:hover .card-posterior {
    transform: rotateY(0deg);
}
Click para Copiar
img-8
Copiado

¿Que es lo que se puede personalizar del código?

Solo se debería, en caso que lo quisieras, cambiar los parámatros que están señalados en verde y corresponden a la línea 7 del código CSS: 1s all ease-in-out;

 duración de la transition: cambiando el tiempo, por ejemplo para que el efecto se produzca de forma mas rápida cambiar el 1 por 0.5 o bien por 1.5 para que se tome mas tiempo durante la ejecución del efecto. 
- el transition-timming-function: efecto de la velocidad con la que se desarralla la transición de un estado a otro: mas info aqui.

Por supuesto, puedes, y debes, cambiar los nombres de las clases si no coinciden las tuyas con las del código.

Logo Oxygenados
5 1 voto
Puntuación
Suscribir
Notificar de
guest
0 Comentarios
Viejos
Nuevos Más votados
Comentarios en línea
Ver todos los comentarios
El diseño web responsivo está muerto

El diseño fluido se refiere a un enfoque de diseño web en el que las dimensiones de los elementos son flexibles, escalando proporcionalmente al tamaño de la pantalla del usuario.
En lugar de medidas fijas de píxeles, utiliza unidades relativas como porcentajes o ems para garantizar que el diseño se ajuste sin problemas, independientemente del dispositivo.

Leer más
Mas Iconos con Vainilla Font

Mostramos como añadir más iconos sin la necesidad de añadir más sets de SVGs, usando la fuente denominada "vanilla" y con la particularidad de que vamos a poder usarlos de manera global en todo nuestro sitio o solo en aquellas páginas o entradas en las que sea necesario.
La diferencia entre usarlos de manera global en todo el sitio o solo en aquellas páginas está en que en la primera manera cargaremos los kb de la fuente, en este caso 79Kb de manera innecesaria en aquellas páginas o entradas donde no requiramos el uso de estos iconos.

Leer más
Subrayado Animado

Un pequeño tip para lograr un efecto de subrayado animado con css y Oxygen

Leer más
homeapartmentmagic-wandlighterquestion-circle