Propriété rotate CSS dans Internet Explorer

Question

Hallo, je veux tourner la DIV dans une certaine mesure. Dans FF il fonctionne, mais dans IE, je suis face au problème. Par exemple, dans le style suivant, je puis utilisateur rotation = 1 à 4

Cela signifie que la balise DIV pivotera à 90 ou 180, 270 ou 360 degrés. Mais si j’ai besoin que la DIV tourne seulement 20 degrés alors qu’il fonctionne pas plus.

Comment puis-je résoudre ce problème dans Internet Explorer.

Answer 1

Pour faire pivoter de 45 degrés dans IE, vous devez le code suivant dans votre feuille de style:

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

Veuillez prendre note de ce qui précède que IE8 a une syntaxe différente pour IE6/7. Vous devez fournir à la fois les lignes de code si vous voulez en charge toutes les versions d'IE.

L'horrible numéros, en Radians; vous aurez besoin de travailler sur les chiffres pour vous-même si vous souhaitez utiliser un autre angle de 45 degrés (il y a des tutoriels sur internet, si vous regardez pour eux).

Notez également que le IE6/7 syntaxe provoque des problèmes pour les autres navigateurs en raison de la non échappés symbole deux-points dans la chaîne de filtre, ce qui signifie qu'il n'est pas valide CSS. Dans mes tests, cela provoque Firefox pour ignorer tous les code CSS après le filtre. C'est quelque chose que vous devez être conscient, car il peut causer des heures de confusion si vous êtes pris par elle. J'ai résolu ce problème en ayant l'IE spécifique des choses dans une autre feuille de style qui les autres navigateurs n'ont pas de charge.

Tous les autres navigateurs actuels (y compris IE9 et IE10 - yay!!!) soutenir le CSS3 transform style (quoique souvent avec le fournisseur préfixes), de sorte que vous pouvez utiliser le code suivant pour obtenir le même effet dans tous les autres navigateurs:

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

Espérons que cela aide.

[MODIFIER]
Depuis cette answser est toujours à se lever-voix, je sens que je devrais le mettre à jour avec les informations d'une javacript bibliothèque appelée CSS papier de verre qui permet de l'utiliser (à proximité) standard code CSS pour les rotations, même dans les anciennes versions IE.

Une fois que vous avez ajouté CSS du papier de verre pour votre site, vous devriez être en mesure d'écrire le code CSS suivant pour IE6-8:

-sand-transform: rotate(40deg);

Beaucoup plus facile que les traditionnels filter style que vous auriez normalement besoin d'utiliser IE.

[MODIFIER]
À noter également un supplément de caprice spécifiquement avec IE9 (et seulement IE9), qui prend en charge à la fois la norme transform et le style ancien de la IE -ms-filter. Si vous avez tous les deux spécifiés, ce qui peut entraîner IE9 se faire complètement confus et rendu juste un solide boîte noire où l'élément aurait été. La meilleure solution pour cela est d'éviter l' filter style en utilisant du papier de verre polyfill mentionnés ci-dessus.

Answer 2

Vous aurez besoin de faire une transformation de matrice comme suit :

Où COS_THETA et SIN_THETA sont les valeurs des cosinus et sinus de l’angle (c.-à-d. `` à 45°).

Answer 3

Il existe un outil en ligne appelé IETransformsTranslator. Avec cet outil, que vous pouvez faire le filtre matrice transforme ce qui fonctionne sur IE6, IE7 et IE8. Il suffit de vous coller CSS3 transform fonctions (par exemple rotate(15deg)) et il fera le reste. http://www.useragentman.com/IETransformsTranslator/

Answer 4

http://css3please.com/

Faites défiler jusqu'à « .box_rotate » pour le préfixe Microsoft IE9 +. Un débat similaire ici : rotation d’un Div élément en jQuery

Answer 5

Juste un conseil... réfléchir à deux fois avant de l'utiliser "transform: rotate()", ou même "-ms-transform :rotate()" (IE9) avec les mobiles!

J'ai été frapper dur pour le mur pendant des jours. J'ai un "cinétique" du système en cours, que des images et, de plus, une zone de commande. J'ai fait "transformer" sur un bouton de la flèche de sorte qu'il simule pointant vers le haut et vers le bas... j'ai reviewd les 1.000 plus de lignes de code pour les âges!!! ;-)

Tout est ok, une fois que j'ai enlevé transform:rotation à partir de la CSS. C'est un peu (ne pas utiliser de gros mots) délicat de la façon IE gère, en les comparant à d'autres borwsers.

Grande réponse @Spudley! Merci pour l'écrire!