Proyecto ASIR

Las transiciones en CSS3

Diaporama interactivo

Vamos a crear un diaporama muy sencillo, para que podamos aplicarle transformaciones y transiciones. Las imágenes se visualizarán con una transformación de cambio de escala, para mostrarlas con un tamaño más pequeño. Cuando pasemos el cursor con el ratón, la imagen se ampliará y se desplazará hacia la derecha con una transición.

Vamos a usar una estructura HTML5, con los elementos section, figure y figcaption.

Vamos a usar las propiedades de transformación para pasar las imágenes originales a una escala del 20%, de modo que se visualicen con un tamaño menor. Lo indicaremos en el selector figure.

Queremos aplicar dos transiciones: un cambio de escala y un desplazamiento horizontal. Esas transiciones afectarán a todas las propiedades (all), durante 1 segundo y tendrán una velocidad constante (linear).

Esas transiciones tendrán lugar cuando se pase el cursor (:hover) sobre los elementos figure. La escala pasará a 1 para mostrar las imágenes con su tamaño de origen scale(1), el desplazamiento volverá horizontal será diferente para cada imagen, por lo que establecemos una clase para cada una, mientras que el desplazamiento horizontal será de 150 píxeles hacia la derecha (left: 150px).

	#diaporama { 
		position: relative; 
		width: 150px; 
		border: 2px solid #2197b1;
	}

	#diaporama figure { 
		position: relative; 
		margin: 50px -10px; 
		top : -50px; 
		left: 0; 
		/* La transformación: cambio de escala del 25% */ 
		-webkit-transform: scale(.2); 
		-o-transform: scale(.2); 
		transform: scale(.2); 
		/* Para la visualización del cambio de escala */ 
		width: 100px; 
		height: 100px; 
		/* Las transiciones */ 
		-moz-transition: all 1s linear; 
		-webkit-transition: all 1s linear; 
		-o-transition: all 1s linear; 
		transition: all 1s linear; 
	}
	#diaporama figcaption { 
		font: 4em Verdana;
	}

	figure#diapo1:hover { 
		-webkit-transform: scale(1); 
		-o-transform: scale(1); 
		transform: scale(1); 
		top: -50px; 
		left: 180px;
	}

	figure#diapo2:hover { 
		-webkit-transform: scale(1); 
		-o-transform: scale(1); 
		transform: scale(1); 
		top: -200px; 
		left: 180px;
	}

	figure#diapo3:hover { 
		-webkit-transform: scale(1); 
		-o-transform: scale(1); 
		transform: scale(1); 
		top: -350px; 
		left: 180px;
	}

	figure#diapo4:hover { 
		-webkit-transform: scale(1); 
		-o-transform: scale(1); 
		transform: scale(1); 
		top: -500px; 
		left: 180px;
	}