Comment faire pivoter un élément DIV d'un degré spécifique dans Internet Explorer ?

Rotation d'un DIV à l'aide de la propriété CSS rotate dans IE

La propriété CSS rotate est un outil puissant pour transformer des éléments sur une page Web. Cependant, les utilisateurs d'IE peuvent rencontrer des problèmes lorsqu'ils tentent de faire pivoter un élément d'un degré spécifique.

Problème

Pour illustrer le problème, considérons le style suivant :

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

Ce style fait pivoter le DIV à 90, 180, 270 ou 360 degrés. Cependant, si l'objectif est de faire pivoter le DIV de seulement 20 degrés, cette approche est inefficace.

Solution

Pour faire pivoter un élément d'un degré spécifique dans IE, le code suivant est requis :

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

Notez que le code pour IE8 diffère de celui pour IE6/7. Pour prendre en charge toutes les versions d'IE, les deux lignes de code sont requises.

Il convient de noter que les nombres dans le code représentent des radians et non des degrés. Ainsi, il peut être nécessaire de convertir l'angle souhaité en radians pour obtenir la rotation souhaitée.

Autre compatibilité avec les navigateurs

Tous les autres navigateurs modernes, y compris IE9 et IE10, prennent en charge le style de transformation CSS3. Cela permet la rotation des éléments à l'aide du code suivant :

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

Considérations supplémentaires

• La syntaxe IE6/7 peut provoquer des problèmes dans d'autres navigateurs en raison d'un caractère CSS non valide. Pour éviter ce problème, des styles IE spécifiques peuvent être placés dans une feuille de style distincte.
• CSS Sandpaper est une bibliothèque JavaScript qui permet l'utilisation du code CSS standard pour les rotations, même dans les anciennes versions d'IE.
• IE9 a une bizarrerie où l'utilisation à la fois de la transformation standard et du style -ms-filter peut entraîner des problèmes de rendu. Pour éviter cela, il est recommandé d'utiliser plutôt le polyfill CSS Sandpaper.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!