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:

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.

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.