Creando un carrusel animado con CSS

22-11-2016 - Andrés Cruz

En esta entrada veremos cómo crear una sencilla pero atractiva animación con un poco de CSS como la mostrada al inicio de esta entrada.

Como puedes ver, la misma puede ser empleada para mostrar diversos elementos, como imágenes, textos etc; también recordemos que no es la primera vez que trabajamos con carruseles con CSS:

¿Cómo crear un carrusel con CsS?

Sin más que comentar manos a la obra!

Haremos uso de las transformaciones 3D de CSS y por eso encontraremos elementos como perspective que permite -valga la redundancia- especificar la perspectiva de un objeto en píxeles y obviamente el transform para realizar traslaciones en los distintos ejes aunque como podrás ver la transformación para este experimento solo se usa el eje de las Y.

La estructura en HTML será la siguiente:

<figure class="icon-cards">
	<div class="icon-cards__content">
		<div class="icon-cards__item"></div>
		<div class="icon-cards__item"></div>
		<div class="icon-cards__item"></div>
	</div>
</figure>

Ahora definimos el CSS para el contenedor padre icon-cards__content:

.icon-cards__content {
	position: absolute;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	animation: carousel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
}

Como vemos definimos la propiedad transform-style con el valor preserve-3d para indicar que todo nuestro experimento conformado por las animaciones y transformaciones CSS especificadas un poco más abajo se visualicen en 3D.

Las cubic-bezier en CSS permite especificar la velocidad de las animaciones a través de puntos que conforman una curva.

Ahora es el turno de definir el CSS base de nuestras cartas:

.icon-cards__item {
	position: absolute;
	top: 0;
	left: 0;
	width: 190px;
	height: 210px;
	border-radius: 6px;
}
.icon-cards__item:nth-child(1) {
	background: rgba(252, 192, 77, 0.9);
	transform: rotateY(0) translateZ(182px);
}
.icon-cards__item:nth-child(2) {
	background: rgba(49, 192, 204, 0.9);
	transform: rotateY(120deg) translateZ(182px);
}
.icon-cards__item:nth-child(3) {
	background: rgba(236, 233, 242, 0.9);
	transform: rotateY(240deg) translateZ(182px);
}

Nada del otro mundo, un CSS en común para definir el tamaño entre otras cosas y CSS específicos con ayuda del selector nth-child con el cual variamos el color y posición de cada una de las cartas y de esta forma no se solapan entre sí.

Por último tenemos la animación:

@-webkit-keyframes carousel {
	0%,  17.5% {
		transform: translateZ(-182px) rotateY(0);
	}
	27.5%, 45% {
		transform: translateZ(-182px) rotateY(-120deg);
	}
	55%, 72.5% {
		transform: translateZ(-182px) rotateY(-240deg);
	}
	82.5%, 100% {
		transform: translateZ(-182px) rotateY(-360deg);
	}
}

En donde simplemente se desplazan en el eje de las Y las cartas configuradas.

Puedes ver el experimento original en el siguiente enlace: transform Colorful Animated Carousel.


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

!Cursos a!

10$

En Udemy

Quedan 4 días!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!