Transformaciones CSS - scale

Ya vimos cómo utilizar la propiedad -transform: translate. Ahora volvemos con la transformación scale que permite cambiar el tamaño de los objetos, o con otras palabras, aplicar zoom, ya sea para aumentar o para disminuir el tamaño.

Seguramente quedaste encantado con los ejemplos, en especial el segundo, en el que se logra un sorprendente efecto tridimensional.

En la primer imagen, lo que hicimos fue agregar una clase para poder aplicarle los estilos.

<div style="text-align: center;">
<img class="sun" src="URL-DE-IMAGEN"/>
</div>

Ahora veamos cómo lograr los efectos con el CSS.

.sun {   /* Trancisiones */
-webkit-transition:0.5s;   /* Podés cambiar la velocidad */
-moz-transition:0.5s;
-o-transition:0.5s;
-ms-transition:0.5s;
}
.sun:hover {
cursor:pointer;
-webkit-transform:scale(1.5);   /* Efecto de zoom */
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
-ms-transform:scale(1.5);
-webkit-transition:0.8s;   /* Trancisiones */
-moz-transition:0.8s;
-o-transition:0.8s;
-ms-transition:0.8s;
}

Listo, con ese simple código conseguiremos este asombroso efecto. Ahora ¿Cómo lograr que el tamaño sea menor?
Esto depende completamente del valor de la transformación

-webkit-transform:scale(x);
-moz-transform:scale(x);
-o-transform:scale(x);
-ms-transform:scale(x);

• Si es igual a 1 el tamaño no variará, y es el valor por defecto
• Si es mayor a 1 el tamaño será mayor
• Si es menor a 1 el tamaño será menor al original

Ahora veamos los estilos del segundo ejemplo con class="pajaro"

.pajaro {
box-shadow:0 30px 40px #7C7C7C;   /* Sombra */
/* Trancisiones */
-webkit-transition:0.8s;  /* Podés cambiar la velocidad */
-moz-transition:0.8s;
-o-transition:0.8s;
-ms-transition:0.8s;
}
.pajaro:hover { 
cursor:pointer;
-webkit-transform:scale(0.8);   /* Efecto de zoom */
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-ms-transform:scale(0.8);
-webkit-transition:2s;   /* Trancisiones */
-moz-transition:2s;
-o-transition:2s;
-ms-transition:2s;
}

Hasta la próxima con la propiedad rotate. Saludos

PD: Usando el mismo código (CSS) se puede aplicar esta propiedad a los contenedores (<div class="ejemplo">Texto</div>).
Si tienes dudas, no esperes para dejar tu comentario.