CSS3-Transformation: drehen; in IE9

Question 1

Ich habe ein Element, das in einem Design, das ich gemacht habe, vertikal sein muss. Ich habe das CSS dafür in allen Browsern außer IE9 funktionieren. Ich habe den Filter für IE7 & IE8 verwendet:

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

Dies scheint jedoch mein Element in IE9 transparent zu machen und die CSS3-Transformations-Eigenschaft scheint nichts zu tun!

Kennt jemand sowieso rotierende Elemente in IE9?

Wirklich dankbar für die Hilfe!

W.

Question 2

Standard CSS3 Rotate sollte in IE9 funktionieren, aber ich glaube, Sie müssen ihm ein Herstellerpräfix geben, wie folgt:

  -ms-transform: rotate(10deg);

Es ist möglich, dass es in der Beta-Version nicht funktioniert. Wenn nicht, laden Sie die aktuelle Vorschau-Version (Vorschau 7) herunter. Dies ist eine spätere Version der Beta. Ich habe keine Beta-Version zum Testen, daher kann ich nicht bestätigen, ob sie in dieser Version enthalten war oder nicht. Die endgültige Release-Version soll dies definitiv unterstützen.

Ich kann das auch IE-spezifisch bestätigen filter Eigenschaft in IE9 gelöscht wurde.

[Bearbeiten] Die
Leute haben um weitere Dokumentation gebeten. Wie sie sagen, ist dies ziemlich begrenzt, aber ich habe diese Seite gefunden: http://css3please.com/ die zum Testen verschiedener CSS3-Funktionen in allen Browsern nützlich ist.

Das Testen der Drehfunktion auf dieser Seite in der IE9-Vorschau führte jedoch zu einem spektakulären Absturz.

Ich habe jedoch einige unabhängige Tests mit durchgeführt -ms-transform:rotate() IE9 auf meinen eigenen Testseiten durchgeführt, und es funktioniert einwandfrei. Mein Fazit ist also, dass die Funktion implementiert ist, aber einige Fehler aufweist, die möglicherweise mit der dynamischen Einstellung zusammenhängen.

Ein weiterer nützlicher Bezugspunkt, für den Funktionen in welchen Browsern implementiert sind, ist www.canIuse.com - siehe http://caniuse.com/#search=rotation

[EDIT]
Diese alte Antwort wiederbeleben, weil ich kürzlich von einem Hack namens CSS Sandpaper erfahren habe der für die Frage relevant ist und die Dinge möglicherweise einfacher macht.

Der Hack implementiert die Unterstützung des Standard-CSS transformfür alte IE-Versionen. Jetzt können Sie Ihrem CSS Folgendes hinzufügen:

-sand-transform: rotate(10deg);

... und lassen Sie es in IE 6/7/8 funktionieren, ohne die filterSyntax verwenden zu müssen. (Natürlich wird immer noch die Filtersyntax hinter den Kulissen verwendet, aber dies erleichtert die Verwaltung erheblich, da die Syntax anderen Browsern ähnlich ist.)

Question 3

Versuche dies

<!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>

Question 4

Ich hatte auch Probleme mit Transformationen in IE9, die ich verwendet habe -ms-transform: rotate(10deg)und die nicht funktionierten. Ich habe alles versucht, was ich konnte, aber das Problem war im Browsermodus. Damit Transformationen funktionieren, müssen Sie den Kompatibilitätsmodus auf "Standard IE9" setzen.

Question 5

Ich weiß, dass dies alt ist, aber ich hatte das gleiche Problem, fand diesen Beitrag und obwohl es nicht genau erklärte, was falsch war, half es mir, die richtige Antwort zu finden - also hilft meine Antwort hoffentlich jemand anderem, der möglicherweise eine hat ähnliches Problem wie bei mir.

Ich hatte ein Element, das ich vertikal drehen wollte, also fügte ich natürlich den Filter hinzu: für IE8 und dann die Eigenschaft -ms-transform für IE9. Was ich gefunden habe, ist, dass IE9 das Element sehr schlecht rendert, wenn die Eigenschaft -ms-transform UND der Filter auf dasselbe Element angewendet werden. Meine Lösung:

Wenn Sie die Eigenschaft transform-origin verwenden, fügen Sie auch eine für MS hinzu (-ms-transform-origin: links unten;). Wenn Sie Ihr Element nicht sehen, kann es sein, dass es sich um die Mittelachse dreht und somit die Seite irgendwie verlässt - überprüfen Sie dies also noch einmal.
Verschieben Sie die Eigenschaft filter: für IE7 und 8 in ein separates Stylesheet und verwenden Sie eine IE-Bedingung, um dieses Stylesheet für Browser unter IE9 einzufügen. Auf diese Weise wirkt es sich nicht auf die IE9-Stile aus und alle sollten einwandfrei funktionieren.
Stellen Sie sicher, dass Sie auch das richtige DOCTYPE-Tag verwenden. Wenn Sie es falsch haben, funktioniert IE9 nicht richtig.