origin - Transformación CSS3: rotar; en IE9
transform rotate css cross browser (4)
La rotación estándar de CSS3 debería funcionar en IE9, pero creo que debes darle un prefijo de proveedor, así:
-ms-transform: rotate(10deg);
Es posible que no funcione en la 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 de filter específica de IE 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 las funciones que se implementan en los navegadores es www.canIuse.com - ver http://caniuse.com/#search=rotation
[EDITAR]
Reanudando esta vieja respuesta porque recientemente descubrí un hack llamado CSS Sandpaper que es relevante para la pregunta y puede facilitar las cosas.
El truco implementa soporte para la transform CSS estándar para versiones anteriores de IE. Entonces ahora puede agregar lo siguiente a su CSS:
-sand-transform: rotate(10deg);
... y que funcione en IE 6/7/8, sin tener que usar la sintaxis del 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 está usando una sintaxis similar a otros navegadores)
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. Usé el filtro para IE7 e IE8:
progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
Sin embargo, esto parece hacer que mi elemento sea transparente en IE9 y la propiedad de "tranform" de CSS3 no parece hacer nada.
¿Alguien sabe de todos modos de elementos giratorios en IE9?
Realmente aprecio la ayuda!
W.
Prueba esto
<!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>
Sé que esto es viejo, pero estaba teniendo el mismo problema, encontré esta publicación, y si bien no explicaba exactamente lo que estaba mal, me ayudó a encontrar la respuesta correcta, así que espero que mi respuesta ayude a alguien más que pueda estar teniendo una 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 de origen de transformación, agregue una para MS también (-ms-transform-origin: left bottom;). 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 y 8 a una hoja de estilos separada y use un 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.
También tuve problemas con las transformaciones en IE9, usé -ms-transform: rotate(10deg) y no funcionó. 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".