Cambiando tamaño y ángulo de elementos con CSS3

Algunas veces queremos que alguna imagen u otro elemento de nuestras páginas HTML reduzca o aumente su tamaño a escala, o quizás que gire un poco. Esto es una tarea sencilla.

Cabe mencionar que lo siguiente es compatible con Mozilla Firefox, Safari, Opera y Google Chrome.

Si queremos cambiar el tamaño de nuestra imagen, sólo basta añadir lo siguiente a nuestra hoja de estilos o al atributo "style":

-moz-transform:scale(1);
-webkit-transform:scale(1);
-o-transform:scale(1);

Entiándase que 1 representa el 100% de la medida original, así que 0.8 sería 80% y 1.2 sería 120%.

Si queremos cambiar darle un toque de rotación a nuestra imagen:

-moz-transform:rotate(1deg);
-webkit-transform:rotate(1deg);
-o-transform:rotate(1deg);

Entiándase que 1deg representa un giro de 1 grado negativo (en sentido de las manecillas del reloj), pueden usarse giros positivos como -2.3deg que equivale a 2.3 grados en el sentido contrario de las manecillas del reloj (la forma positiva de medir los grados).

Ejemplos:

<div align="center" style="-moz-transform: rotate(10deg); -o-transform: rotate(10deg); -webkit-transform: rotate(10deg);">
<img border="0" src="linkAtuImagen" /></div>

El de scale lo puedes ver al pasar el mouse sobre los enlaces a deviantART y demás que están en la parte superior.

No te olvides de comentar, gracias ;D. Don't forget to comment, thanks ;D.