2011-03-09 24 views
13

¿Es posible rotar un elemento div usando Javascript & NO usando HTML 5?Rotar un elemento div

Si es así, ¿qué atributos del elemento debo configurar/cambiar para hacer que gire? Es decir, div.what?

PD: Cuando digo rotar quiero decir rotar una imaga alrededor de un eje, no cada x milisegundos muestran una rotación de imagen diferente.

+0

Cuando excluye HTML5 están también excluyendo CSS3? –

+0

Bueno, estoy excluyendo HTML5 porque no funcionará en todos los navegadores, por lo que si CSS3 funciona en todos los navegadores (¿verdad?) Entonces lo usaría. – Mach

+0

IE no es totalmente compatible con CSS3 y HTML5, especialmente las versiones anteriores a IE9 –

Respuesta

4

Sí, es posible rotar un div no usando HTML5, pero usando CSS3.

Puede experimentar con la rotación CSS en CSS3 Please (alternar la regla .box_rotate).

Para obtener más información, Google para: css gire

Si quieres una manera de tener texto girado que funciona en todos los navegadores (incluyendo IE6) luego tratar Raphaël.

+0

+1 para un enlace muy interesante – Benubird

18

vieja pregunta, pero la respuesta podría ayudar a alguien ...

Puede girar los elementos de marcado utilizando CSS patentada en todos los principales navegadores (el término HTML5 no es específicamente relevante aquí, sin embargo).

Ejemplo de cómo girar un elemento de 45 grados utilizando CSS:

.example { 
    -webkit-transform: rotate(45deg); /* Chrome & Safari */ 
    -moz-transform: rotate(45deg); /* Firefox */ 
    -ms-transform: rotate(45deg); /* IE 9+ */ 
    -o-transform: rotate(45deg); /* Opera */ 
    transform: rotate(45deg); /* CSS3 */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); /* IE 7-8 */ 
} 

Sí, la sintaxis MSIE es que horrible. Tenga en cuenta que "sizingMethod = 'auto expand'" - eso es crucial para evitar que se recorte el resultado.

Estoy bastante seguro de que las transformaciones de Matrix (al menos en cierta medida) también se admiten en MSIE 6, pero es más complicado en qué circunstancias las admite (y cada vez es más difícil cuidarlas).

+0

+1 para la versión de IE. –

+0

+1 para la versión de IE. ¡Si tan solo supiera ...! – Leonard

+0

@Zanthel, ¡exactamente! mira mi respuesta css3 a IETransform. El tipo es un genio. –

4

Sé que llego tarde. Por posteridad, quería publicar this: Este sitio web es bastante bueno e incluso realiza las transformaciones de matriz para sus correspondientes contrapartes css3

+1

+!Gracias por publicar un enlace a algo que genera automáticamente Matrix Transforms, ¡regresaba aquí para hacer eso! :) –

0

Puede hacerlo usando Matrix en IE. Aquí hay una función que lo resuelve de forma cruzada.

http://kaisarcode.com/javascript-rotate

+3

¡Bienvenido a Stack Overflow! Tenga en cuenta que los enlaces desnudos a su propio sitio web/producto no son alentados aquí por dos razones; En primer lugar, una respuesta debe publicarse como una respuesta independiente, no como un simple enlace a un sitio externo. En segundo lugar, la autopromoción tiende a ser mal vista aquí, y a menudo se señala como correo no deseado (especialmente si no hay información que indique que está enlazando a su propio sitio/producto). –

Cuestiones relacionadas