Transformaciones CSS3: Girar una imagen


       Las nuevas propiedades CSS3 permiten, entre otras cosas transformaciones visuales de los elementos de una página, como trasladar, rotar, escalar y sesgar. Esto permite hacer animaciones y efectos visuales muy complejos que antes solo eran posibles en flash o similares. Aunque no realicemos efectos tan complejos, siempre podemos usar algunas transformaciones para que la decoración de la página sea más dinámica y no una sucesión de cajas con contenido.

       Vamos a empezar con un ejemplo bastante más sencillo, rotar un poco una imagen. Suponemos que la imagen tiene como id “miImagen”, el código CSS sería el siguiente:

#miImagen{
     transform: rotate(-10deg);
}

       Solo con eso conseguimos que la imagen rote 10 grados a la izquierda. Se verá bien en los navegadores más modernos, aunque en versiones anteriores era una propiedad no estándar con prefijo, así que si queremos que funcione en versiones anteriores de firefox, chrome, opera o safari deberíamos incluir los códigos con prefijos, aunque de aquí a unos años con el código superior sería suficiente, actualmente si es recomendable incluir:

#miImagen{
     -moz-transform: rotate(-10deg);
     -o-transform: rotate(-10deg);
     -webkit-transform: rotate(-10deg);
     transform: rotate(-10deg);
}

       Como siempre caso aparte es Internet Explorer. A partir de la versión 9 entenderá el selector estándar, pero las versiones anteriores tienen su propio sistema de transformaciones basado en filtros con matrices de transformación. El código para un IE antiguo para la misma rotación sería:

#miImagen{
     -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9848077530122081,       M12=0.17364817766692991, M21=-0.17364817766692991, M22=0.9848077530122081, SizingMethod='auto expand')";

     filter: progid:DXImageTransform.Microsoft.Matrix(
          M11=0.9848077530122081,
          M12=0.17364817766692991,
          M21=-0.17364817766692991,
          M22=0.9848077530122081,
          SizingMethod='auto expand');
     -moz-transform: rotate(-10deg);
     -o-transform: rotate(-10deg);
     -webkit-transform: rotate(-10deg);
     transform: rotate(-10deg);
}

       La línea que comienza con “-ms-filter” es para IE8 y debe estar en una sola línea, la que comienza con “filter” es para IE 6 y 7 y puede separarse en varias líneas. Además la transformación no siempre funciona como queramos y es probable que tengamos que hacer ajustes de posición de la imagen para que se vea como en otros navegadores. La forma de hacerlo con matrices puede alejar a la mayoría de diseñadores (entre los que me incluyo) que entienden lo que es girar 10 grados, pero no ese chorizo de valores extraños. Pero existen servicios que generan automáticamente este código. Recomiendo el de useragentman.

       Por último un ejemplo de como queda nuestro logo girado: