web-dev-qa-db-fra.com

Transformation CSS3: rotation; dans IE9

J'ai un élément qui doit être vertical dans une conception que j'ai faite. J'ai le css pour que cela fonctionne dans tous les navigateurs sauf IE9. J'ai utilisé le filtre pour IE7 et IE8:

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

Cela semble cependant rendre mon élément transparent dans IE9 et la propriété 'transformée' de CSS3 ne semble rien faire!

Est-ce que quelqu'un sait de toute façon des éléments en rotation dans IE9?

Vraiment apprécier l'aide!

W.

cssinternet-explorercss3rotationinternet-explorer-9
77
wilsonpage

La rotation standard CSS3 devrait fonctionner dans IE9, mais je pense que vous devez lui attribuer un préfixe de fournisseur, comme suit:

  -ms-transform: rotate(10deg);

Il est possible que cela ne fonctionne pas dans la version bêta; sinon, essayez de télécharger la version d’aperçu actuelle (preview 7), qui est une version ultérieure de la version bêta. Je n'ai pas la version bêta à tester, je ne peux donc pas confirmer si c'était dans cette version ou non. La version finale est définitivement prévue pour le supporter.

Je peux également confirmer que la propriété filter spécifique à IE a été supprimée dans IE9.

[Modifier]
Les gens ont demandé une documentation supplémentaire. Comme on dit, cela est assez limité, mais j’ai trouvé cette page: http://css3please.com/ qui est utile pour tester diverses fonctionnalités CSS3 dans tous les navigateurs.

Mais tester la fonctionnalité de rotation sur cette page dans l'aperçu IE9 l'a fait planter de manière assez spectaculaire.

Cependant, j'ai effectué quelques tests indépendants en utilisant -ms-transform:rotate() dans IE9 dans mes propres pages de test, et tout fonctionne correctement. Donc, ma conclusion est que la fonctionnalité est implémentée, mais a quelques bugs, peut-être liés au réglage dynamique.

Www.canIuse.com est un autre point de référence utile pour lequel des fonctionnalités sont implémentées dans les navigateurs. Voir http://caniuse.com/#search=rotation

[MODIFIER]
Revenons à cette vieille réponse parce que j’ai récemment découvert un piratage appelé CSS Sandpaper , qui est pertinent pour la question et qui pourrait faciliter les choses.

Le hack implémente la prise en charge de la norme CSS transform pour les anciennes versions de IE. Alors maintenant, vous pouvez ajouter ce qui suit à votre CSS:

-sand-transform: rotate(10deg);

... et que cela fonctionne dans IE 6/7/8, sans avoir à utiliser la syntaxe filter. (bien sûr, il utilise toujours la syntaxe du filtre en arrière-plan, mais cela le rend beaucoup plus facile à gérer car il utilise une syntaxe similaire à celle des autres navigateurs)

137
Spudley

Essaye ça

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    margin-left: 50px;
    margin-top: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
}
.rotate {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -sand-transform: rotate(10deg);
    display: block;
    position: fixed;
}
</style>
</head>

<body>
<div class="rotate">Alpesh</div>
</body>
</html>
5
Alpesh Panchal

J'ai également eu des problèmes avec les transformations dans IE9, j'ai utilisé -ms-transform: rotate(10deg) et cela n'a pas fonctionné. J'ai essayé tout ce que je pouvais, mais le problème était en mode navigateur. Pour que les transformations fonctionnent, vous devez définir le mode de compatibilité sur "Standard IE9".

4
Katherine Mokhova

Je sais que c’est vieux, mais j’ai eu le même problème, j’ai trouvé ce post, et même s’il n’explique pas exactement ce qui ne va pas, il m’a aidé à trouver la bonne réponse - alors, espérons-le, ma réponse aidera quelqu'un qui pourrait avoir un problème. problème similaire au mien.

J'avais un élément que je voulais faire pivoter verticalement, alors naturellement j'ai ajouté le filtre: pour IE8, puis la propriété -ms-transform pour IE9. Ce que j'ai trouvé, c'est qu'avoir la propriété -ms-transform ET le filtre appliqué au même élément fait que IE9 restitue très mal l'élément. Ma solution:

  1. Si vous utilisez la propriété transform-Origin, ajoutez-en aussi un pour MS (-ms-transform-Origin: left bottom;). Si vous ne voyez pas votre élément, il se peut qu'il tourne sur son axe central et quitte ainsi la page d'une manière ou d'une autre - alors vérifiez bien cela.

  2. Déplacez la propriété filter: property for IE7 & 8 vers une feuille de style distincte et utilisez un IE conditionnel pour insérer cette feuille de style dans le cas des navigateurs inférieurs à IE9. De cette manière, cela n'affectera pas les styles IE9. fonctionne bien.

  3. Assurez-vous d'utiliser également la balise DOCTYPE correcte; Si vous vous trompez, IE9 ne fonctionnera pas correctement.

3
Steve