Tictac Soluciones Informáticas > Diseño web > Transformaciones CSS3: Girar una imagen

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:

#logoTicTac{
-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);
margin-left: 0;
margin-right: 0;
text-align: center;
}

2018-08-29T10:53:27+00:0007/03/2012|Diseño web, HTML5|

Deje su comentario

Centro de preferencias de privacidad

Estrictamente necesarias

Cookies necesarias para el correcto funcionamiento de nuestra web. Por ejemplo, necesitamos que unas cookies estrictamente necesarias estén habilitadas con el objetivo de guardar tus preferencias sobre el uso de cookies. Si deshabilitas esta cookie, no podremos guardar tus preferencias. Esto quiere decir que cada vez que visites nuestra web, tendrás que volver a habilitar o deshabilitar las cookies otra vez.

wordpress_test_cookie, Wp-settings-time-1, wp-settings-1, gdpr, 1P_JAR

AdvertisingEstadísticas y análisis

Cookies de análisis de terceros. Estas cookies son generadas por Google Analytics. Google almacena la informacion recogida por las cookies en servidores ubicados en Estados Unidos, cumpliendo con la legislación Europea en cuanto a protección de datos personales y se compromete a no compartirla con terceros, excepto cuando la ley le obligue a ello o sea necesario para el funcionamiento del sistema. Google no asocia su direccion IP con ninguna otra información que tenga.

_ga, _gid, _gat

Analytics

Other