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:
.contenedor
{
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;
}
.contenedor img
{
position: absolute;
width: 100%;
transition: 0.5s;
}
.contenedor:hover img:nth-child(4)
{
transform: translate(160px,-160px);
opacity: 1;
}
.contenedor:hover img:nth-child(3)
{
transform: translate(120px,-120px);
opacity: .8;
}
.contenedor:hover img:nth-child(2)
{
transform: translate(80px,-80px);
opacity: .6;
}
.contenedor: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="contenendor">
<img src="https://blog.josegonzalezbueno.com/wp-content/uploads/2020/11/imagen-para-efecto.png">
<img src="https://blog.josegonzalezbueno.com/wp-content/uploads/2020/11/imagen-para-efecto.png">
<img src="https://blog.josegonzalezbueno.com/wp-content/uploads/2020/11/imagen-para-efecto.png">
<img src="https://blog.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:
