Paso 1: Configurar el archivo HTML
Crea un nuevo archivo HTML en tu editor de texto preferido.
Agrega la estructura básica de un documento HTML con las etiquetas <html>, <head> y <body>.
Dentro de la etiqueta <head>, agrega las etiquetas <meta> para el conjunto de caracteres y la vista del dispositivo, y establece el título del documento.
En el <body>, crea un contenedor <div> con la clase “card”.
Dentro del contenedor “card”, agrega otro <div> con la clase “content”.
Dentro del div “content”, agrega dos <div> más con las clases “front” y “back” respectivamente, para representar el frente y la parte posterior de la tarjeta.
Agrega el texto o contenido que desees mostrar en el frente y en la parte posterior de la tarjeta.
El código HTML se verá así:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Volteo de Tarjeta</title><linkrel="stylesheet"href="styles.css"></head><body><divclass="card"><divclass="content"><divclass="front">JEANES</div><divclass="back">Dotaciones!<p>JEANES LEON</p></div></div></div></body></html>Paso 2: Estilizar con CSS
Crea un nuevo archivo CSS (llamado styles.css, por ejemplo) en el mismo directorio que tu archivo HTML.
Define los estilos para el cuerpo del documento, así como para las clases “.card”, “.content”, “.front” y “.back”.
Utiliza las propiedades CSS como position, width, height, background, transform, transition, entre otras, para estilizar las diferentes partes de la tarjeta y crear el efecto de volteo.
Puedes utilizar imágenes de fondo para el frente y la parte posterior de la tarjeta si lo deseas.
El código CSS se verá así:
body {
background: #eee;
font-family: "Lily Script One";
}
.card {
position: relative;
width: 300px;
height: 300px;
perspective: 500px;
}
.content {
position: absolute;
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
}
.card:hover.content {
transform: rotateY(180deg);
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
line-height: 300px;
text-align: center;
font-size: 60px;
border-radius: 5px;
backface-visibility: hidden;
}
.front {
background: white;
color: #03446a;
background-image: url('ruta/a/imagen_del_frente.jpg');
}
.back {
background: #03446a;
color: white;
transform: rotateY(180deg);
background-image: url('ruta/a/imagen_de_atras.jpg');
}```
Paso 3: GuardaryEjecutarGuardatusarchivosHTMLyCSSenlamismacarpeta.
AbreelarchivoHTMLentunavegadorwebpreferido.
¡Yesoestodo! Ahoratendrásunatarjetaconefectodevolteoalpasarelcursorsobreella. Puedespersonalizarelcontenidoylosestilossegúntuspreferencias.
