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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Volteo de Tarjeta</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card">
<div class="content">
<div class="front">JEANES</div>
<div class="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: Guardar y Ejecutar
Guarda tus archivos HTML y CSS en la misma carpeta.
Abre el archivo HTML en tu navegador web preferido.
¡Y eso es todo! Ahora tendrás una tarjeta con efecto de volteo al pasar el cursor sobre ella. Puedes personalizar el contenido y los estilos según tus preferencias.Curso de Frontend Developer
