DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
22-11-2016

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.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Hover over the cards

Hover over the cards

Árbol arcoíris creciente

Árbol arcoíris creciente

Rainbow tiles con solo CSS

Rainbow tiles con solo CSS

Algunos artículos que te pueden interesar

Creando un input radio personalizado con solo CSS

Creando un input radio personalizado con solo CSS

Se explica cómo crear un input radio personalizado con solo CSS a través de un un indicador y animaciones y transiciones en CSS.

Andrés Cruz 23-05-2016

¿Cómo hacer rotaciones con CSS3?

¿Cómo hacer rotaciones con CSS3?

En esta entrada veremos como realizar rotaciones sobre cualquier elementos HTML empleando la propiedad transform de CSS3.

Andrés Cruz 07-08-2014

Animando cosas con CSS: creando loaders

Animando cosas con CSS: creando loaders

Los loaders son un recurso de los más vistosos y necesarios en cualquier aplicación al momento de realizar una tarea que requiera tiempo; en esta entrada veremos cómo crear un par de loaders.

Andrés Cruz 20-10-2015