Comment faire pivoter des éléments dans IE9 à l'aide de la transformation CSS3 ?

Transformations CSS3 dans IE9 : Rotation

Cet article vise à résoudre le problème de la rotation des éléments dans IE9.

Question

Dans la conception, nous avons besoin d'un élément vertical. Bien que CSS fonctionne correctement dans tous les navigateurs sauf IE9. Nous avons utilisé l'attribut filter dans IE7 et IE8 :

progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Cependant, cela rendait l'élément transparent dans IE9 et la propriété "transform" CSS3 semblait n'avoir aucun effet !

Réponse

La rotation CSS3 standard devrait fonctionner dans IE9, mais nous pensons qu'un préfixe de fournisseur doit être ajouté, comme ceci :

-ms-transform: rotate(10deg);

Il se peut qu'il ne soit pas disponible dans la version bêta ; sinon, essayez de télécharger la version d'aperçu actuelle (Aperçu 7), qui est une version plus récente que la version bêta. Nous n'avons pas de version bêta de la version bêta, nous ne pouvons donc pas confirmer si elle existe dans cette version. La version finale est définitivement prévue pour le supporter.

Nous pouvons également confirmer que l'attribut de filtre spécifique à IE a été supprimé dans IE9.

Documentation complémentaire

On dit qu'elle est très limitée mais nous avons trouvé cette page : http://css3please.com/ qui est utile pour tous les navigateurs Utile pour tester diverses fonctionnalités CSS3 dans le navigateur.

Mais tester la fonctionnalité de rotation sur cette page dans l'aperçu d'IE9 provoque un crash horrible.

Cependant, nous avons testé indépendamment -ms-transform:rotate() dans IE9 sur notre propre page de test et cela a très bien fonctionné. Notre conclusion est donc que la fonctionnalité est implémentée, mais avec quelques bugs, probablement liés aux paramètres dynamiques.

Un autre point de référence utile pour déterminer quelles fonctionnalités sont implémentées dans quels navigateurs est www.canIuse.com -- voir http://caniuse.com/#search=rotation

Latest Mise à jour

Repostage de cette ancienne réponse car nous avons récemment entendu parler d'un hack appelé CSS Sandpaper qui est lié au problème et pourrait rendre les choses plus simples.

Ce hack implémente la prise en charge des transformations CSS standard dans les anciennes versions d'IE. Alors maintenant, vous pouvez ajouter ce qui suit à votre CSS :

-sand-transform: rotate(10deg);

... et le faire fonctionner dans IE 6/7/8 sans utiliser la syntaxe de filtre. (Bien sûr, il utilise toujours la syntaxe de filtre sous le capot, mais cela est rendu plus facile en utilisant une syntaxe similaire à celle des autres syntaxes de navigateur.)

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!