Efecto 3d en imágenes para tu web

Tiempo estimado de lectura: 3 minutos

 

Crear efecto 3d en imágenes para tu web

Hoy vamos a ver un efecto 3d que puedes hacer con imágenes para utilizar en tu web, Llevamos unas semanas haciendo varios efectos en imágenes, y hoy vamos a continuar con un efecto 3d muy sencillo que puede darle un toque original a tu página web.

Este ejemplo es muy vistoso, pero su código no tiene demasiada complicación, así que podremos seguirlo sea cual sea nuestro nivel de código HTML y CSS.

¡Vamos a ello!

Código que vamos a utilizar

Antes de nada, tenemos que saber que, cuando se trata de efectos de este tipo, siempre se necesitan dos tipos de código: el código CSS que es el encargado de darle forma (colores, tamaños y otros estilos), al código HTML que por lo general es el encargado de crear los contenedores necesarios para que los efectos puedan llevarse a cabo.

Como hemos dicho, el código no es excesivamente difícil de entender, pero como siempre hacemos, primero lo escribimos y después lo comentamos.

EL Código CSS que vamos a utilizar es este:

.container
{
position: relative;
width: 360px;
height: 640px;
margin-top: 150px;
background: rgba(0,0,0,0);
transform: rotate(-30deg) skew(25deg) scale(.8);
transition: 0.5s;
}
.container img
{
position: absolute;
width: 100%;
transition: 0.5s;
}
.container:hover img:nth-child(4)
{
transform: translate(160px,-160px);
opacity: 1;
}
.container:hover img:nth-child(3)
{
transform: translate(120px,-120px);
opacity: .8;
}
.container:hover img:nth-child(2)
{
transform: translate(80px,-80px);
opacity: .6;
}
.container:hover img:nth-child(1)
{
transform: translate(40px,-40px);
opacity: .4;
}

Este código hace lo siguiente: en primer lugar, crea un contenedor (.container) que será el encargado de contener el efecto. A continuación cargamos la imagen, y le decimos que cuando se ponga el ratón sobre la imagen (hover) se creen 4 copias o instancias de esa imagen (img:nth-child), las cuales se irán colocando hacia abajo y hacia la izquierda y con distintas opacidades (1, 0.8, 0.6 y 0.4 respectivamente).

Una vez que ya tenemos las distintas imágenes creadas, hay que crear el contenedor en el que se mostrarán. Para ello utilizaremos código HTML, y sería algo parecido a este:

<div class="container">
<img src="https://www.josegonzalezbueno.com/wp-content/uploads/2020/11/imagen-para-efecto.png">
<img src="https://www.josegonzalezbueno.com/wp-content/uploads/2020/11/imagen-para-efecto.png">
<img src="https://www.josegonzalezbueno.com/wp-content/uploads/2020/11/imagen-para-efecto.png">
<img src="https://www.josegonzalezbueno.com/wp-content/uploads/2020/11/imagen-para-efecto.png">
</div>

Y como ya sabrás, de este código solo tienes que cambiar la ruta de la imagen sobre la que quieres realizar el efecto.

El resultado del efecto es este:

Efecto 3d en imágenes con CSS
Efecto 3d en imágenes con CSS

¿Te ha servido este artículo?, DALE CAÑA. 0


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *