Propriedade de rotação CSS no IE

Eu quero rodar o DIV até certo ponto. No FF funciona mas no IE estou enfrentando um problema.

Por exemplo, no estilo a seguir, posso definir rotação = 1 a 4

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

Isso significa que o DIV será girado para 90 ou 180 ou 270 ou 360 graus. Mas se eu precisar girar o DIV apenas 20 graus, ele não funcionará mais.

Como posso resolver esse problema no IE?

    Para girar 45 graus no IE, você precisa do seguinte código em sua folha 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 */ 

    Você notará a partir do acima que o IE8 tem uma syntax diferente do IE6 / 7. Você precisa fornecer ambas as linhas de código se quiser suportar todas as versões do IE.

    Os números horríveis existem em radianos; você precisará calcular os números para si mesmo se quiser usar um ângulo diferente de 45 graus (há tutoriais na internet se você procurar por eles).

    Observe também que a syntax do IE6 / 7 causa problemas para outros navegadores devido ao símbolo de dois pontos sem escape na cadeia de caracteres do filtro, o que significa que é um CSS inválido. Nos meus testes, isso faz com que o Firefox ignore todo o código CSS após o filtro. Isso é algo que você precisa estar ciente, pois pode causar horas de confusão se você for pego por isso. Eu resolvi isso tendo o material específico do IE em uma folha de estilo separada que outros navegadores não carregavam.

    Todos os outros navegadores atuais (incluindo IE9 e IE10 – yay!) Suportam o estilo de transform CSS3 (embora frequentemente com prefixos de fornecedores), portanto você pode usar o seguinte código para obter o mesmo efeito em todos os outros 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 ajude.

    Editar

    Como essa resposta ainda está recebendo votos, acho que devo atualizá-la com informações sobre uma biblioteca JavaScript chamada CSS Sandpaper, que permite usar (quase) o código CSS padrão para rotações, mesmo em versões mais antigas do IE.

    Depois de adicionar a Lixeira CSS ao seu site, você poderá gravar o seguinte código CSS para o IE6-8:

     -sand-transform: rotate(40deg); 

    Muito mais fácil do que o estilo de filter tradicional que você normalmente precisaria usar no IE.

    Editar

    Observe também uma peculiaridade adicional especificamente com o IE9 (e apenas o IE9), que suporta tanto a transform padrão quanto o estilo antigo do IE -ms-filter . Se você especificou os dois, isso pode fazer com que o IE9 fique completamente confuso e renderizando apenas uma checkbox preta sólida onde o elemento estaria. A melhor solução para isso é evitar o estilo de filter usando o polyfill da Sandpaper mencionado acima.

    Você precisará fazer uma transformação de matriz da seguinte maneira:

     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' )"; 

    Onde COS_THETA e SIN_THETA são os valores de cosseno e seno do ângulo (isto é, 0.70710678 para 45 °).

    Existe uma ferramenta on-line chamada IETransformsTranslator. Com esta ferramenta você pode fazer o filtro de matriz transforma o que funciona no IE6, IE7 e IE8. Basta colar as funções de transformação CSS3 (por exemplo, girar (15deg)) e ele fará o resto. http://www.useragentman.com/IETransformsTranslator/

    http://css3please.com/

    Role para baixo até ‘.box_rotate’ para o prefixo Microsoft IE9 +. Discussão semelhante aqui: Rotacionando um Elemento Div em jQuery

    Apenas uma dica … pense duas vezes antes de usar “transform: rotate ()”, ou até mesmo “-ms-transform: rotate ()” (IE9) com celulares!

    Eu tenho batido forte na parede por dias. Eu tenho um sistema ‘kinetic’ em andamento, que desliza imagens e, além disso, uma área de comando. Eu fiz “transformar” em um botão de seta para simular apontando para cima e para baixo … Eu revisei as 1.000 linhas de código mais para idades !!! 😉

    Tudo bem, uma vez que eu removi transform: rotacionar do CSS. É um pouco (para não usar palavrões) complicado a maneira como o IE lida com ele, comparando com outros clientes.

    Ótima resposta @Spudley! Obrigado por escrevê-lo!

    Link útil para a transformação do IE

    Essa ferramenta converte as propriedades CSS3 Transform (que quase todos os navegadores modernos usam) para o CSS equivalente usando a tecnologia Visual Filters proprietária da Microsoft.

    Para o exemplo IE11 (tipo de navegador = versão Trident = 7.0):

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