Wie drehe ich Elemente in IE9 mithilfe der CSS3-Transformation?

CSS3-Transformationen in IE9: Rotation

Dieser Artikel zielt darauf ab, das Problem rotierender Elemente in IE9 zu lösen.

Frage

Im Design benötigen wir ein vertikales Element. Obwohl CSS in allen Browsern außer IE9 gut funktioniert. Wir haben das Filterattribut in IE7 und IE8 verwendet:

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

Dies führte jedoch dazu, dass das Element in IE9 transparent wurde und die CSS3-Eigenschaft „transform“ schien keine Wirkung zu haben!

Antwort

Standard-CSS3-Rotation sollte in IE9 funktionieren, aber wir denken, dass ein Herstellerpräfix hinzugefügt werden muss, etwa so:

-ms-transform: rotate(10deg);

Es ist möglicherweise nicht in der Betaversion verfügbar. Wenn nicht, laden Sie die aktuelle Vorschauversion (Preview 7) herunter, bei der es sich um eine neuere Version als die Betaversion handelt. Wir haben keine Beta-Version der Beta und können daher nicht bestätigen, ob es sich um diese Version handelt. Es ist definitiv geplant, dass die endgültige Version dies unterstützt.

Wir können auch bestätigen, dass das IE-spezifische Filterattribut in IE9 entfernt wurde.

Weitere Dokumentation

Es soll sehr begrenzt sein, aber wir haben diese Seite gefunden: http://css3please.com/, die für alle Browser nützlich ist Testen verschiedener CSS3-Funktionen im Browser.

Aber das Testen der Rotationsfunktion auf dieser Seite in der IE9-Vorschau führt zu einem schrecklichen Absturz.

Allerdings haben wir -ms-transform:rotate() im IE9 unabhängig auf unserer eigenen Testseite getestet und es hat einwandfrei funktioniert. Daher kommen wir zu dem Schluss, dass die Funktion implementiert ist, allerdings mit einigen Fehlern, die wahrscheinlich mit dynamischen Einstellungen zusammenhängen.

Ein weiterer nützlicher Referenzpunkt zur Bestimmung, welche Funktionen in welchen Browsern implementiert sind, ist www.canIuse.com – siehe http://caniuse.com/#search=rotation

Neueste Update

Veröffentlichen Sie diese alte Antwort erneut, da wir kürzlich von einem Hack namens CSS Sandpaper erfahren haben, der mit dem Problem zusammenhängt und die Dinge möglicherweise einfacher machen könnte.

Dieser Hack implementiert die Unterstützung für Standard-CSS-Transformationen in älteren IE-Versionen. Jetzt können Sie also Folgendes zu Ihrem CSS hinzufügen:

-sand-transform: rotate(10deg);

... und es im IE 6/7/8 zum Laufen bringen, ohne die Filtersyntax zu verwenden. (Natürlich wird unter der Haube immer noch die Filtersyntax verwendet, aber dies wird durch die Verwendung einer Syntax, die der anderer Browsersyntaxen ähnelt, erleichtert.)

Das obige ist der detaillierte Inhalt vonWie drehe ich Elemente in IE9 mithilfe der CSS3-Transformation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!