Un carrusel en 3D que girará a 360° mostrando diferentes imágenes, cuando pasemos el mouse por una de las imágenes el carrusel se detendrá para que puedas visualizar sin problemas la imagen, desarrollado en HTML y CSS.
¿Cómo funciona?
Opción 1 Proyecto con 6 imágenes.
Opción 2 Proyecto con 4 imágenes.
El gif solo dura 10 segundos y se reinicia, pero el proyecto del carrusel hace girar por completo las imágenes.
¿Cómo crear?
Necesitamos crear una carpeta img con distintas imágenes.
Imágenes obtenidas gracias a Pixabay.
Otra carpeta con los archivos index.html, style.css y agregamos la carpeta img.
Continuamos con el código.
index.html
<html> <head> <title>VaidrollTeam</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="contenedor"> <div class="vaicontenedor"> <figure><img src="img/gato1.png"></figure> <figure><img src="img/gato2.png"></figure> <figure><img src="img/gato3.png"></figure> <figure><img src="img/gato4.png"></figure> <figure><img src="img/gato5.png"></figure> <figure><img src="img/gato6.png"></figure> </div> </div> </body> </html>
Si quieres agregar más imágenes solo tienes que agregar otra etiqueta figure dentro del div con la ruta de la imagen y el nombre completo.
<figure><img src="ruta/nombre.png"></figure>
style.css
*
{
margin: 0;
padding: 0;
}
body
{
background: linear-gradient(140deg, #275D90, #3380B5);/*Color del fondo*/
width:100%;
height:100%;
}
.contenedor
{
width: 400px; /*Tamaño permitido para las imágenes*/
position: absolute;
top:30%;
left:34%;
}
.vaicontenedor
{
width: 100%;
position: absolute;
animation: girar 60s infinite linear; /*Velocidad para girar 60*/
transform-style: preserve-3d;
}
.vaicontenedor:hover
{
animation-play-state: paused; /*Se detiene al pasar el mouse en una imagen*/
cursor: pointer;
}
.vaicontenedor figure
{
width: 100%;
height: auto;
overflow: hidden;
position: absolute;
box-shadow: 0px 0px 20px 0px black;
}
/*translateZ es para aumentar el radio*/
.vaicontenedor figure:nth-child(1){transform: rotateY(60deg) translateZ(600px);}
.vaicontenedor figure:nth-child(2){transform: rotateY(120deg) translateZ(600px);}
.vaicontenedor figure:nth-child(3){transform: rotateY(180deg) translateZ(600px);}
.vaicontenedor figure:nth-child(4){transform: rotateY(240deg) translateZ(600px);}
.vaicontenedor figure:nth-child(5){transform: rotateY(300deg) translateZ(600px);}
.vaicontenedor figure:nth-child(6){transform: rotateY(360deg) translateZ(600px);}
.vaicontenedor img
{
width: 100%;
transition: all 300ms;
}
.vaicontenedor img:hover
{
-webkit-transform:scale(1.25);
}
@keyframes girar
{
from{
transform: rotateY(0deg);
}to{
transform: rotateY(360deg);
}
}
Para modificar la velocidad del carrusel busca 60s en .vaicontenedor, si quieres que vaya más rápido dale un número bajo y para que vaya más lento dale un número alto.
animation: girar 60s infinite linear;
Más abajo tenemos 6 líneas similares de este código.
.vaicontenedor figure:nth-child(1){transform: rotateY(60deg) translateZ(600px);}
Cada uno es por una imagen de nuestra carpeta img y si agregas otra imagen debes de agregar otra línea de código con el número que le sigue.
El rotateY es la ubicación inicial de la imagen, para que te sea más fácil calcular la ubicación solo tienes que dividir 360 / la cantidad de imágenes = rotateY.
Por ejemplo: tengo 6 imágenes, 360 / 6 = 60deg, entonces inicio con 60deg para la primera imagen, la segunda sería 120deg. y así vamos subiendo de 60 en 60 hasta dar exactamente con 360deg para la última imagen.
El translateZ(600px) es para aumentar el radio o la distancia entre las imágenes, dale un número bajo las imágenes se juntaran y si le das un número alto las imágenes se alejaran uno del otro.
En todo caso te dejo dos proyectos con diferentes configuraciones para que puedas comparar y analizar.
