DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

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

Calendario de cubo

Calendario de cubo

Un waffle con CSS

Un waffle con CSS

Ondas con SVG y CSS

Ondas con SVG y CSS

Algunos artículos que te pueden interesar

Truco para los bordes en CSS: Bordes transparentes

Truco para los bordes en CSS: Bordes transparentes

En esta entrada veremos un pequeño truco que permite que los bordes de los contenedores de nuestros elementos HTML; se vean transparentes.

Andrés Cruz 22-01-2015

Seleccionar rangos de elementos con CSS

Seleccionar rangos de elementos con CSS

A veces puede hacerse necesario seleccionar un rango de datos mostrados y es de casi obligatorio demarcar esta región seleccionada lo cual puede hacerse con CSS.

Andrés Cruz 27-07-2015

Elementos reversibles con estilo 3D en CSS

Elementos reversibles con estilo 3D en CSS

En esta entrada veremos como hacer que un elemento sea reversible empleando las animaciones y transiciones en CSS.

Andrés Cruz 30-03-2015