Una vez más aquí. Hoy vengo a dejar un pequeño artículo sobre algo que utilicé hace unos días en un proyecto para una persona, y sobre la que otro usuario me preguntó. El caso es que en ese proyecto, el interesado quería una tarjeta con efecto 3D, y esta la hice con un poco de CSS. Cuando uno de los usuarios miró el resultado, me preguntó cómo podría hacer algo así para sus cosas, y bueno, pues en las siguientes líneas vamos a ver cómo se puede hacer de forma sencilla con HTML, CSS y algunas imágenes.
Debo decir, que esto que voy a publicar aquí, es solo una adaptación de lo que le presenté a esta persona en el proyecto en el que estaba trabajando. Por eso, las imágenes que se van a ver, son tan solo unas imágenes de muestra que tenía a mano. Para conseguir un mejor efecto, lo suyo es cambiarlas, aun que creo que pueden servir para ilustrar este ejemplo que vamos a ver.
El código para crear una tarjeta con efecto 3D
Este ejemplo simple, se puede crear tan solo con dos archivos. El index.html, en el que vamos a crear la estructura de la tarjeta, y el archivo style.css, que será en el que guardaremos las reglas CSS para darle estilo a la tarjeta.
El archivo index.html
Como decía, dentro de este archivo, vamos a guardar el siguiente código. Este no es más que un ejemplo de una página HTML básica, que contiene una tarjeta 3D construida con CSS.
- La primera línea
<!DOCTYPE html>define el tipo de documento como HTML. - La segunda línea
<html lang="es">inicia la etiqueta HTML y define el idioma de la página como español (es). - El bloque de código dentro de las etiquetas
<head>contiene información meta sobre la página, como el título de la pestaña del navegador, la codificación de caracteres y los enlaces a los archivos de estilos. En este caso, la página se titula «Tarjeta 3D con CSS» y se está enlazando un archivo CSS externo (./style.css). - La etiqueta
<body>abre el cuerpo principal de la página web, que es donde se incluirá todo el contenido visible de la página. - Dentro del cuerpo de la página, hay un contenedor de divs que tiene la clase «titulo» y un atributo de título con el texto «made in entreunosyceros.net«.
- Después, hay un enlace
<a>que envuelve un contenedor de divs que tiene la clase «card«. Dentro de este contenedor de divs, hay otro contenedor con la clase «wrapper» que envuelve una imagen con la clase «cover-image» que muestra un fondo para la tarjeta. - Después, hay una imagen con la clase «title» que muestra la imagen del título que se muestra en la tarjeta, y otra imagen con la clase «character» que muestra un logo.
- Finalmente, la etiqueta
</body>cierra el cuerpo de la página y la etiqueta</html>cierra la página HTML.
<!DOCTYPE html>
<html lang="es" >
<head>
<meta charset="UTF-8">
<title>Tarjeta 3D con CSS</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="titulo" title="made in entreunosyceros.net"></div>
<a href="https://entreunosyceros.net/about/" alt="entreunosyceros.net" rel="noopener noreferrer" target="_blank">
<div class="card">
<div class="wrapper">
<img src="./img/fondo.jpg" class="cover-image" />
</div>
<img src="./img/titulo.png" class="title" />
<img src="./img/logo.webp" class="character" />
</div>
</a>
</body>
</html>
En resumen, este código crea una página web que contiene una tarjeta 3D utilizando CSS para darle un efecto visual atractivo. Este código también contiene enlaces a archivos externos como hojas de estilo y archivos de imagen, los cuales se guardan dentro de la carpeta ./img/.
El archivo style.css
Dentro de este archivo, vamos a guardar el siguiente código. Este nos servirá para definir una tarjeta 3D con una imagen y un título que se despliega cuando se pasa el cursor sobre ella. Dentro de este código, nos vamos a encontrar:
- En la sección
:root, se definen las variables CSS--card-heighty--card-width, que se utilizan más adelante en la definición de la tarjeta. - En la sección
*, se define que el tamaño de las cajas incluya tanto su contenido como su borde. - El
bodyestablece un fondo degradado, un tamaño de pantalla completo y un diseño de cuadrícula con los elementos centrados horizontal y verticalmente. - En la sección
.card, se definen la altura y el ancho de la tarjeta utilizando las variables CSS definidas anteriormente. También se establece la perspectiva en 2500px para crear el efecto 3D. El contenido de la tarjeta se centra verticalmente y se agrega un margen para separar las tarjetas. - La sección
.cover-image, define la imagen de fondo de la tarjeta. .characterdefine la imagen que se despliega cuando se pasa el cursor sobre la tarjeta. Inicialmente tiene una opacidad de cero y se encuentra detrás del contenido de la tarjeta.- En la sección
.card:hover .character, se define cómo se despliega la imagen al pasar el cursor sobre la tarjeta. Se aumenta la opacidad y se aplica una transformación en 3D para crear el efecto de elevación. - La sección
.card:hover .wrapperdefine cómo se despliega la tarjeta al pasar el cursor sobre ella. Se aplica una transformación en 3D y una sombra para crear un efecto de profundidad. - En la sección
.card:hover .title, se define cómo se despliega el título de la tarjeta al pasar el cursor sobre ella. Se aplica una transformación en 3D para crear el efecto de elevación. - En la sección
.title, se define el estilo de la imagen del título de la tarjeta. También se agrega una animación de cambio de sombra cuando se pasa el cursor sobre el título. - En la sección
.titulo:hover, se define cómo cambia la sombra del título al pasar el cursor sobre él. - En la sección
.titulo::after, se agrega un texto adicional a la parte inferior del título de la tarjeta que dice «Tarjeta 3D«.
:root {
--card-height: 550px;
--card-width: calc(var(--card-height) / 1.5);
}
* {
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
margin: 0;
display: grid;
justify-content: center;
align-items: center;
background: linear-gradient(to right top, #a6bf40, #00af3c);
}
.card {
width: var(--card-width);
height: var(--card-height);
position: relative;
display: flex;
justify-content: center;
align-items: flex-end;
padding: 0 36px;
perspective: 2500px;
margin: 0 50px;
}
.cover-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.character {
width: 100%;
opacity: 0;
transition: all 0.5s ease-in-out;
position: absolute;
z-index: -1;
}
.card:hover .character {
opacity: 1;
transform: translate3d(0%, -30%, 150px);
}
.card:hover .wrapper {
transform: perspective(900px) translateY(-6%) rotateX(30deg) translateZ(0);
box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}
.card:hover .title {
transform: translate3d(0%, -35px, 200px);
}
.title {
width: 150%;
transition: transform 0.5s;
}
.card:hover .wrapper::before,
.wrapper::after {
opacity: 1;
}
.card:hover .wrapper::after {
height: 320px;
}
.wrapper {
transition: all 0.5s;
position: absolute;
width: 100%;
z-index: -1;
}
.wrapper::before,
.wrapper::after {
content: "";
opacity: 0;
width: 100%;
height: 80px;
transition: all 0.5s;
position: absolute;
left: 0;
}
.wrapper::before {
top: 0;
height: 100%;
background-image: linear-gradient(
to top,
transparent 50%,
rgba(12, 13, 19, 0.5) 68%,
rgba(12, 13, 19) 97%
);
}
.wrapper::after {
bottom: 0;
opacity: 1;
background-image: linear-gradient(
to bottom,
transparent 50%,
rgba(12, 13, 19, 0.5) 68%,
rgba(12, 13, 19) 97%
);
}
/*Título*/
.titulo {
box-sizing: border-box;
padding: 10px;
border: none;
font: normal 38px / normal "Warnes", Helvetica, sans-serif;
color: rgba(255, 255, 255, 1);
text-align: center;
white-space: pre;
text-shadow: 0 0 10px rgb(255, 0, 0), 0 0 20px rgba(255, 0, 0),
0 0 30px rgba(255, 0, 0), 0 0 40px #727272, 0 0 70px #727272,
0 0 80px #4e4e4e, 0 0 100px #2b2b2b;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
}
.titulo:hover {
text-shadow: 0 0 10px rgb(69, 0, 109), 0 0 20px rgb(73, 0, 95),
0 0 30px rgb(57, 0, 68), 0 0 40px #580054, 0 0 70px #000000,
0 0 80px #000000, 0 0 100px #000000;
}
.titulo::after {
content: "Tarjeta 3D";
}
Y bueno, con esto creo que se puede ver lo sencillo que puede ser crear una tarjeta con efecto 3D. Evidentemente esto puede mejorarse mucho, pues como ya dije, no es más que una adaptación básica de lo que hice el otro día. Pero añadiéndole un fadein y fadeout, el efecto puede mejorar mucho. Bueno, eso y cambiando las imágenes, por que estas que añadí son solo imágenes que tenía a mano por aquí.
Si quieres descargar todo el código y las imágenes añadidas a este ejemplo, puedes hacerlo desde el repositorio en GitHub donde alojé este ejemplo.