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

Loader espiral con CSS

Loader espiral con CSS

Como dibujar con canvas y ciclos -HTML5

Como dibujar con canvas y ciclos -HTML5

Ley del cuadrado inverso con CSS

Ley del cuadrado inverso con CSS

Algunos artículos que te pueden interesar

Bordes redondeados con CSS

Bordes redondeados con CSS

En este artículo le enseñaremos como crear bordes redondeados con solo CSS, es decir, sin emplear imágenes en el proceso empleando la propiedad border-radius.

Andrés Cruz 21-11-2013

Formas geométricas con CSS (parte 1)

Formas geométricas con CSS (parte 1)

Con CSS y un poco de HTML e imaginación podemos crear cosas sorprendentes; una de estas cosas es lo posibilidad de crear formas geométricas como veremos a continuación.

Andrés Cruz 13-10-2013

¿Cómo hacer una sencilla galería con CSS y 6 líneas de JavaScript?

¿Cómo hacer una sencilla galería con CSS y 6 líneas de JavaScript?

En esta entrada explicaremos como crear una sencilla galería empleando CSS y seis (6) líneas de JavaScript.

Andrés Cruz 12-02-2015