Cómo hacer una tarjeta de chancaje con CSS

En los sitios web, las tarjetas que voltean sus costados en flips se conocen como tarjetas Flip. Una simple tarjeta de flip consta de un lado frontal y una parte trasera. Sin embargo, puede usar esta tarjeta para que el sitio web sea atractivo y entretenido. La tarjeta Flip puede ser una tarjeta de presentación, tarjeta de producto, tarjeta de juego, tarjeta de servicio o más.

Este artículo demostrará el método para crear una tarjeta Flip con CSS.

Cómo hacer/crear una tarjeta Flip usando CSS?

Crearemos una tarjeta de flip que contenga una imagen en el lado frontal y su espalda comprende la descripción de la imagen.

Paso 1: crear una página HTML

Primero, agregue un elemento Div con el nombre "conquistador". Este contenedor sostendrá la tarjeta de flip en su interior. Para esto:

• Agregue un elemento div y asigne un nombre de clase como "carta invertida".
• Luego, coloque dos elementos Div con nombres de clase "del lado de la fuente" y "trasero", Respectivamente.

Como hemos discutido anteriormente, el lado frontal mostrará una imagen, y la parte posterior contendrá la descripción de la imagen:

Baby Steps zapatos rosa

Recién nacido - 12 meses. Baby Steps 'Girls' Shoe presenta un par de zapatos modernos, livianos y cómodos con una suela suave.

Aplicemos las propiedades de estilo CSS al código indicado anteriormente.

Paso 2: Estilo "Flip-Container" Div

.Flip-Container
Posición: relativo;
Ancho: 300px;
Altura: 300px;
margen: auto;

El contenedor Flip tiene las siguientes propiedades de CSS:

• "posiciónLa propiedad se utiliza para la configuración de la posición del elemento. El valor "relativo"Posiciona el elemento en relación con su posición normal.
• "altura"La propiedad define la altura del elemento HTML seleccionado.
• "ancho"La propiedad significa su ancho.
• "margen"El valor de la propiedad indica el espacio alrededor del elemento agregado.

Paso 3: Estilo "Flip-Card" Div

.carta invertida
Posición: Absoluto;
Ancho: 100%;
Altura: 100%;
Estilo de transformación: Preserve-3D;
Transición: todos 0.5s facilidad;

El "carta invertida"Div Element tiene el estilo utilizando las siguientes propiedades CSS:

• "posición"Propiedad con el valor"absoluto"Posiciona el elemento en relación con su elemento principal posicionado.
• "estilo transformadorLa propiedad se utiliza para establecer el espacio de sus elementos infantiles planos o 3D. El valor "preservación-3d"Especifica el espacio 3D de sus hijos.
• "transición"Propiedad con el valor"todos 0.5s facilidad" indica que "todo"Las propiedades se aplican con la duración de la transición de"0.5s". El valor "facilidad"Especifica el efecto de transición para comenzar como lento, luego rápido y luego retroceder para lentamente.

Paso 4: Estilo "del lado" y "trasero" elementos Div

.lado delantero,
.del lado trasero
Posición: Absoluto;
Ancho: 100%;
Altura: 100%;
VISIBILIDAD DE CABEZA: Oculta;

Para esconder la cara trasera del "trasero"Div, así como el"lado delantero"Div Elemento, use el"Visión de respaldo"Con el valor"oculto".

Paso 5: Estilo "Back-Side" Div

.del lado trasero
Antecedentes: Darkcyan;
Color: #fff;
Border-Radius: 5px;
Text-Align: Center;
tamaño de fuente: 25px;
transformación: Rotatey (180 grados);

El "trasero"Div Element tiene las siguientes propiedades CSS:

• "fondo"La propiedad establece el color de fondo del elemento.
• "color"La propiedad establece el color de fuente del elemento.
• "radio fronterizo"La propiedad hace que los bordes del elemento reduzcan.
• "tamaño de fuenteSe utiliza la propiedad para especificar el tamaño de fuente del elemento.
• "texto alineado"El valor de la propiedad representa el estilo de alineación del texto agregado.

Entonces, la parte posterior de la tarjeta se verá así:

Cuando pasamos el paso sobre el contenedor de la tarjeta, queremos que la tarjeta gire en 180 grados, revelando la parte posterior y ocultando la parte delantera. Entonces, gire la parte posterior utilizando el CSS "transformar" propiedad.

• "transformarLa propiedad se utiliza para establecer la transformación del elemento alrededor de las ordenadas. El valor "Rotatey (180 grados)"Rotará el elemento 180 grados alrededor del eje Y.

Aquí está nuestra tarjeta Flip:

Por último, diríjase para agregar el efecto flotante a la tarjeta.

Paso 6: Estilo "Flip-Card" Div en Hover

.Flip-Container: flotante .carta invertida
transformación: Rotatey (180 grados);

El ".Flip-Container: flotante"Se refiere al efecto de desplazamiento sobre el contenido de flip. Cuando el ratón se cierne sobre el "conquistador"Div, el"carta invertidaDiv también girará en 180 grados. Para hacer esto, el CSS "transformar"Propiedad con el valor"Rotatey (180 grados)"Se utiliza.

Entonces, aquí está el resultado final:

Eso se trataba de hacer una tarjeta de flip con CSS.

Conclusión

La tarjeta Flip es el componente decorativo común utilizado en cualquier aplicación web. Esta tarjeta contiene lados delanteros y traseros. En el flotador, voltea y cambia continuamente sus lados. Este efecto de flip se le agrega utilizando el "transformar"Propiedad con el valor"Rotatey ()" función. Esta publicación ha demostrado el procedimiento para hacer una tarjeta de flip con CSS.