web-dev-qa-db-fra.com

Propriété de rotation CSS dans IE

Je veux faire pivoter la DIV dans une certaine mesure. En FF, cela fonctionne mais en IE je suis confronté à un problème.

Par exemple, dans le style suivant, je peux définir rotation = 1 à 4

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

Cela signifie que la DIV sera tournée à 90, 180, 270 ou 360 degrés. Mais si je dois faire pivoter la DIV de seulement 20 degrés, cela ne fonctionne plus.

Comment puis-je résoudre ce problème dans IE?

cssinternet-explorerrotation
73
user160820

Pour effectuer une rotation de 45 degrés dans IE, vous avez besoin du 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 */

Vous remarquerez ci-dessus que IE8 a une syntaxe différente de IE6/7. Vous devez fournir les deux lignes de code si vous souhaitez prendre en charge toutes les versions d'IE.

Les nombres horribles qu'il y a en radians; Si vous souhaitez utiliser un angle autre que 45 degrés (il existe didacticiels sur Internet si vous les recherchez), vous devrez vous-même déterminer les chiffres.

Notez également que la syntaxe IE6/7 pose des problèmes à d'autres navigateurs en raison du symbole deux-points non échappé situé dans la chaîne de filtrage, ce qui signifie qu'il ne s'agit pas d'un code CSS non valide. Dans mes tests, cela fait que Firefox ignore tout le code CSS après le filtre. C’est quelque chose que vous devez savoir, car cela peut causer des heures de confusion si vous êtes pris au dépourvu. J'ai résolu ce problème en intégrant les éléments spécifiques à IE dans une feuille de style distincte que les autres navigateurs n'avaient pas chargée.

Tous les autres navigateurs actuels (y compris IE9 et IE10 - yay!) Supportent le style CSS3 transform (bien que souvent avec des préfixes de vendeurs), vous pouvez donc 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) */

J'espère que ça t'as aidé.

Modifier

Étant donné que cette réponse suscite toujours des votes positifs, j’ai le sentiment que je devrais la mettre à jour avec des informations sur une bibliothèque JavaScript appelée CSS Sandpaper qui vous permet d’utiliser du code CSS (presque) standard pour les rotations, même dans les versions antérieures IE versions.

Une fois que vous avez ajouté CSS Sandpaper à votre site, vous devriez alors être en mesure d'écrire le code CSS suivant pour IE6–8:

-sand-transform: rotate(40deg);

Beaucoup plus facile que le style traditionnel filter que vous auriez normalement besoin d'utiliser dans IE.

Modifier

Notez également une bizarrerie supplémentaire spécifiquement avec IE9 (et uniquement IE9), qui prend en charge à la fois le transform standard et l’ancien style IE -ms-filter. Si vous avez les deux spécifiés, cela peut entraîner une confusion totale pour IE9 et le rendu d'une simple boîte noire où l'élément aurait été. La meilleure solution consiste à éviter le style filter en utilisant le polyfill Sandpaper mentionné ci-dessus.

145
Spudley

Vous devez effectuer une transformation de matrice comme suit:

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

Où COS_THETA et SIN_THETA sont les valeurs de cosinus et de sinus de l'angle (c'est-à-dire 0.70710678 pour 45 °).

58
zzzzBov

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

26
nmsdvid

http://css3please.com/

Faites défiler jusqu'à '.box_rotate' pour le préfixe Microsoft IE9 +. Discussion similaire ici: Rotation d’un élément Div dans jQuery

6
Steve Burrows

Juste un indice ... réfléchissez-y à deux fois avant d'utiliser "transform: rotate ()", ou même "-ms-transform: rotate ()" (IE9) avec les mobiles!

Je frappe durement contre le mur depuis des jours. J'ai un système "cinétique" en cours, qui glisse des images et, au-dessus, une zone de commande. J'ai fait "transformer" un bouton fléché pour simuler un pointage de haut en bas ... J'ai revu les 1.000 lignes de code plus depuis des lustres !!! ;-)

Tout va bien, une fois que j'ai enlevé Transformer: Rotation du CSS. C'est un peu difficile (de ne pas utiliser de mauvais mots) la façon dont IE le gère, en le comparant à d'autres clients.

Super réponse @Spudley! Merci de l'avoir écrit!

2
Pedro Ferreira

lien utile pour IE transformer

Cet outil convertit les propriétés de transformation CSS3 (utilisées par presque tous les navigateurs modernes) en équivalents CSS à l'aide de la technologie de filtres visuels exclusive de Microsoft.

2
Prashant Tapase

Pour IE11 exemple (type de navigateur = Trident version = 7.0):

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