CSS rotar propiedad en IE

Question

CSS rotar propiedad en IE

Quiero rotar el DIV hasta cierto punto. En FF funciona pero en IE me enfrento a un problema.

Por ejemplo, en el siguiente estilo puedo establecer rotation = 1 a 4

 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

Esto significa que el DIV se rotará a 90 o 180 o 270 o 360 grados. Pero si necesito rotar el DIV solo 20 grados, entonces ya no funciona.

¿Cómo puedo resolver este problema en IE?

73

css rotation internet-explorer

Author: Joe McBride, 2011-01-06

Source

7 answers

Tendrá que hacer una transformación de matriz de la siguiente manera:

filter: progid:DXImageTransform.Microsoft.Matrix(
  M11 = COS_THETA,
  M12 = -SIN_THETA,
  M21 = SIN_THETA,
  M22 = COS_THETA,
  sizingMethod = 'auto expand'
);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
  M11 = COS_THETA,
  M12 = -SIN_THETA,
  M21 = SIN_THETA,
  M22 = COS_THETA,
  SizingMethod = 'auto expand'
)";

Donde COS_THETA y SIN_THETA son los valores de coseno y seno del ángulo (es decir, 0.70710678 para 45°).

58

Author: zzzzBov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-05 13:12:11

Existe una herramienta en línea llamada IETransformsTranslator. Con esta herramienta puede hacer que el filtro de matriz transforme lo que funciona en IE6,IE7 e IE8. Simplemente pegue las funciones de transformación CSS3 (por ejemplo, rotar (15deg)) y hará el resto. http://www.useragentman.com/IETransformsTranslator /

26

Author: nmsdvid,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-05-08 19:28:48

Http://css3please.com/

Desplácese hacia abajo hasta '.box_rotate ' para el prefijo Microsoft IE9+. Discusión similar aquí: Rotando un elemento Div en jQuery

6

Author: Steve Burrows,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:34:24

Sólo una pista... piénsalo dos veces antes de usar "transform: rotate()", o incluso "-ms-transform :rotate()" (IE9) con móviles!

He estado golpeando fuerte contra la pared durante días. Tengo un sistema' cinético ' en marcha, que desliza imágenes y, encima de él, un área de comando. Hice "transformar" en un botón de flecha para que simule apuntar hacia arriba y hacia abajo... He revisado las más de 1.000 líneas de código para las edades!!! ;-)

Todo está bien, una vez que eliminé transform:rotate del CSS. Es un poco (no usar mal palabras) difícil la forma en que IE lo maneja, en comparación con otros borwsers.

Gran respuesta @ Spudley ! Gracias por escribirlo!

2

Author: Pedro Ferreira,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-29 20:30:45

Usefull Link para IE transformar

Esta herramienta convierte las propiedades de transformación CSS3 (que casi todos los navegadores modernos usan) al CSS equivalente utilizando la tecnología de Filtros Visuales patentada de Microsoft.

2

Author: Chanchal Prashant Tapase,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-10 08:33:00

Para el ejemplo de IE11 (browser type=Trident version=7.0):

image.style.transform = "rotate(270deg)";

0

Author: C_J,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-20 22:32:58

score 145 · Accepted Answer

Para rotar 45 grados en IE, necesita el siguiente código en su hoja de estilos:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

Observará de lo anterior que IE8 tiene una sintaxis diferente a IE6/7. Debe proporcionar ambas líneas de código si desea admitir todas las versiones de IE.

Los números horribles que hay en radianes; tendrás que calcular las cifras por ti mismo si quieres usar un ángulo que no sea 45 grados (hay tutoriales en Internet si los buscas).

También tenga en cuenta que la sintaxis de IE6/7 causa problemas para otros navegadores debido al símbolo de dos puntos no grabado en la cadena de filtro, lo que significa que no es CSS válido. En mis pruebas, esto hace que Firefox ignore todo el código CSS después del filtro. Esto es algo que debes tener en cuenta, ya que puede causar horas de confusión si te atrapan. Resolví esto al tener las cosas específicas de IE en una hoja de estilo separada que otros navegadores no cargaron.

Todos los demás navegadores actuales (incluyendo IE9 y IE10-yay!) admite el estilo CSS3 transform (aunque a menudo con prefijos de proveedor), por lo que puede usar el siguiente código para lograr el mismo efecto en todos los demás navegadores:

-moz-transform: rotate(45deg);  /* FF3.5/3.6 */
-o-transform: rotate(45deg);  /* Opera 10.5 */
-webkit-transform: rotate(45deg);  /* Saf3.1+ */
transform: rotate(45deg);  /* Newer browsers (incl IE9) */

Espero que eso ayude.

Editar

Dado que esta respuesta todavía está recibiendo votos, siento que debería actualizarla con información sobre una biblioteca JavaScript llamada CSS Sandpaper que le permite usar código CSS (casi) estándar para rotaciones incluso en versiones anteriores de IE.

Una vez que hayas añadido CSS Lija a su sitio, entonces debería ser capaz de escribir el siguiente código CSS para IE6-8:

-sand-transform: rotate(40deg);

Mucho más fácil que el estilo tradicional filter que normalmente necesitaría usar en IE.

Editar

También tenga en cuenta una peculiaridad adicional específicamente con IE9 (y solo IE9), que soporta tanto el estándar transform y el estilo antiguo IE -ms-filter. Si tiene ambos especificados, esto puede resultar en que IE9 se confunda completamente y muestre solo una caja negra sólida donde el elemento lo habría sido. La mejor solución para esto es evitar el estilo filter utilizando el polyfill de papel de lija mencionado anteriormente.