Pregunta CSS gira la propiedad en IE


Quiero rotar el DIV hasta cierto punto. En FF funciona pero en IE estoy enfrentando un problema.

Por ejemplo, en el siguiente estilo puedo establecer la rotación = 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 girar el DIV solo 20 grados, entonces ya no funciona.

¿Cómo puedo resolver este problema en IE?


73
2018-01-06 16:36


origen


Respuestas:


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

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 */

Notará 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 horribles números que hay en Radianos; tendrás que calcular las figuras por ti mismo si quieres usar un ángulo distinto de 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 escaneado 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 atrapa. Lo resolví teniendo las cosas específicas de IE en una hoja de estilos separada que otros navegadores no cargaban.

Todos los demás navegadores actuales (incluidos IE9 e IE10 - ¡yay!) Son compatibles con CSS3 transform estilo (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 ayude.

Editar

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

Una vez que haya agregado papel de lija CSS a su sitio, debe poder escribir el siguiente código CSS para IE6-8:

-sand-transform: rotate(40deg);

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

Editar

También tenga en cuenta una peculiaridad adicional específicamente con IE9 (y solo IE9), que admite tanto el estándar transform y el viejo estilo IE -ms-filter. Si tiene ambos especificados, esto puede provocar que IE9 se confunda por completo y represente solo una caja negra sólida donde debería haber estado el elemento. La mejor solución para esto es evitar el filter estilo usando el papel de lija polietileno mencionado anteriormente.


144
2018-01-06 17:02



Tendrá que hacer una transformación matricial 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 por 45 °).


58
2018-01-06 16:45



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 sus funciones de transformación CSS3 (por ejemplo, rotar (15deg)) y hará el resto. http://www.useragentman.com/IETransformsTranslator/


26
2018-02-21 11:01



http://css3please.com/

Desplácese hasta '.box_rotate' para el prefijo Microsoft IE9 +. Discusiones similares aquí: Girar un elemento Div en jQuery


6
2018-01-06 16:46



Solo una pista ... piénselo dos veces antes de usar "transform: rotate ()", o incluso "-ms-transform: rotate ()" (IE9) con dispositivos móviles.

He estado golpeando duro a la pared durante días. Tengo un sistema 'cinético' en funcionamiento, que desliza imágenes y, encima, un área de comando. Me "transformé" en un botón de flecha para simular que apunta hacia arriba y hacia abajo ... ¡He revisado las más de 1.000 líneas de código por edades! ;-)

Todo bien, una vez que eliminé la transformación: rotate desde el CSS. Es un poco (no usar malas palabras) complicado por la forma en que IE lo maneja, en comparación con otros comandos.

¡Gran respuesta @Spudley! ¡Gracias por escribirlo!


2
2018-01-29 20:30



Enlace útil para transformar IE

Esta herramienta convierte las propiedades de Transformación CSS3 (que usan casi todos los navegadores modernos) en CSS equivalente utilizando la tecnología de filtros visuales propiedad de Microsoft.


2
2017-09-10 08:33



Para el ejemplo IE11 (tipo de navegador = versión Trident = 7.0):

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

0
2018-06-20 22:31