Transformación CSS3: rotar; en IE9

Tengo un elemento que debe ser vertical en un diseño que he hecho. Tengo el CSS para que esto funcione en todos los navegadores excepto IE9. He utilizado el filtro para IE7 IE8 &:Transformación CSS3: rotar; en IE9

progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Sin embargo, esto parece convertir mi elemento transparente en IE9 y el CSS3 porperty 'TRANFORM' no parece hacer nada!

¿Alguien sabe de todos modos de los elementos giratorios en IE9?

¡Realmente agradezco la ayuda!

Fuente

2011-02-01 wilsonpage

134

rotación CSS3 Norma debe trabajar en IE9, pero creo que hay que darle un prefijo de proveedor, así:

-ms-transform: rotate(10deg);

Es posible que no funcione en el versión beta; si no, intente descargar la versión de vista previa actual (vista previa 7), que es una revisión posterior de la versión beta. No tengo la versión beta para probar, así que no puedo confirmar si estaba en esa versión o no. La versión final de la versión definitivamente está programada para ser compatible.

También puedo confirmar que la propiedad específica de IE filter se ha eliminado en IE9.

[Editar]
La gente ha pedido más documentación. Como dicen, esto es bastante limitado, pero encontré esta página: http://css3please.com/ que es útil para probar varias características de CSS3 en todos los navegadores.

Pero probar la función de rotación en esta página en la vista previa de IE9 provocó que se bloquee de manera espectacular.

Sin embargo, he hecho algunas pruebas independientes usando -ms-transform:rotate() en IE9 en mis propias páginas de prueba, y está funcionando bien. Así que mi conclusión es que la característica se implementa, pero tiene algunos errores, posiblemente relacionados con la configuración dinámica.

Otro punto de referencia útil para los que se implementan características en el que los navegadores es www.canIuse.com - ver http://caniuse.com/#search=rotation

[EDIT]
La reactivación de esta respuesta de edad porque hace poco me enteré de un truco llamado CSS Sandpaper cuales es relevante para la pregunta y puede facilitar las cosas.

El hack implementa compatibilidad con el estándar CSS transform para las versiones anteriores de IE. Por lo que ahora se puede añadir el siguiente CSS:

-sand-transform: rotate(10deg);

... y hacer que funcione en IE 6/7/8, sin tener que utilizar la sintaxis filter. (por supuesto, todavía utiliza la sintaxis del filtro detrás de las escenas, pero esto hace que sea mucho más fácil de administrar porque usa una sintaxis similar a otros navegadores)

Fuente

2011-02-01 16:38:36 Spudley

Gracias Spud! Voy a verlo ahora y me pondré en contacto con usted sobre eso. No podía creer la poca documentación que había sobre esto en línea. – wilsonpage

@Spudley ¿Podría publicar una fuente? No puedo encontrarlo en MSDN http://msdn.microsoft.com/en-us/library/ms531207(v=vs.85).aspx –

@ Šime Vidas y @pagewil - tienes razón, no mucho documentación alrededor. Lo encontré documentado aquí: http://css3please.com/, aunque debería tener en cuenta que esta página bloqueó mi copia de la vista previa de IE9 cuando traté de usar la propiedad de rotar. Sin embargo, mis propias pruebas independientes han confirmado que la propiedad funciona, con el prefijo del proveedor como he citado en mi respuesta. (dado el colapso, ¡creo que todavía hay errores!) – Spudley

También tuve problemas con las transformaciones en IE9, utilicé -ms-transform: rotate(10deg) y no hice no funciona Intenté todo lo que pude, pero el problema estaba en el modo de navegador, para que las transformaciones funcionen, debe establecer el modo de compatibilidad en "IE9 estándar".

Fuente

2012-06-11 10:58:57

presione f12 en ie y seleccione cambiar el modo del navegador a ie-9 y luego verifique que esto funcionará ... –

Para que IE9 funcione con texto vertical, debe desactivar el modo peculiar utilizando las siguientes dos líneas de su archivo: '' ' ' – GlenPeterson

Cualquier tipo de documento válido debe deshabilitar el modo peculiar, por ejemplo: . El modo de navegador debe ser IE9 por defecto, a menos que haya cambiado su configuración. – superluminary

probar este

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
body { 
    margin-left: 50px; 
    margin-top: 50px; 
    margin-right: 50px; 
    margin-bottom: 50px; 
} 
.rotate { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    -webkit-transform: rotate(-10deg); 
    -moz-transform: rotate(-10deg); 
    -o-transform: rotate(-10deg); 
    -ms-transform: rotate(-10deg); 
    -sand-transform: rotate(10deg); 
    display: block; 
    position: fixed; 
} 
</style> 
</head> 

<body> 
<div class="rotate">Alpesh</div> 
</body> 
</html>

Fuente

2013-04-01 05:06:28

pruebo este código con ie9, FireFox, Chrome, Safari y su trabajo –

Sé que esto es viejo, pero yo estaba teniendo el mismo problema, que se encuentra este post, y si bien no explicó exactamente lo que estaba mal, me ayudó a la respuesta correcta Espero que mi respuesta ayude a alguien más que pueda tener un problema similar al mío.

Tenía un elemento que quería rotar verticalmente, así que naturalmente agregué el filtro: para IE8 y luego la propiedad -ms-transform para IE9. Lo que encontré es que tener la propiedad -ms-transform Y el filtro aplicado al mismo elemento hace que IE9 represente el elemento muy mal. Mi solución:

Si está utilizando la propiedad transform-origen, agregue demasiado para MS (-ms, transformación y origen: parte inferior izquierda;). Si no ve su elemento, podría ser que esté girando en su eje central y, por lo tanto, abandone la página de alguna manera, así que vuelva a comprobarlo.
Mueva el filtro: propiedad para IE7 & 8 a una hoja de estilos independiente y use IE condicional para insertar esa hoja de estilo para navegadores de menos de IE9. De esta manera, no afecta los estilos de IE9 y todo debería funcionar bien.
Asegúrese de usar también la etiqueta DOCTYPE correcta; si lo tienes mal, IE9 no funcionará correctamente.

Fuente

2014-09-02 19:42:59 Steve

Buena llamada en '-ms-transform-origin'; eso me hizo rascarme la cabeza por un tiempo. – danwild

Transformación CSS3: rotar; en IE9

Respuesta

Cuestiones relacionadas