CSS-Rotationseigenschaft im IE

73

Ich möchte den DIV bis zu einem gewissen Grad drehen. In FF funktioniert es, aber im IE stehe ich vor einem Problem.

Zum Beispiel kann ich im folgenden Stil Rotation = 1 bis 4 setzen

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

Dies bedeutet, dass der DIV um 90 oder 180 oder 270 oder 360 Grad gedreht wird. Aber wenn ich den DIV nur um 20 Grad drehen muss, funktioniert es nicht mehr.

Wie kann ich dieses Problem im IE lösen?

css  internet-explorer  rotation 
— user160820
quelle
Während es möglich ist, Transformationen in IE8 (und IE6 und IE7) mithilfe der Filtermatrix durchzuführen, dreht sie sich um einen anderen Punkt als normale CSS-Rotationen, und es gibt keine einfache Möglichkeit, dies zu beheben. Dies bedeutet, dass Ihre gedrehten Elemente in IE8 immer eine andere Position haben als andere Browser - es sei denn, Sie drehen in JS, z. B. über eine Bibliothek. Weitere Details, Beispiele und eine vorgeschlagene JS-Bibliothek zu dieser Frage .
— user56reinstatemonica8

Antworten:

145

Um sich im IE um 45 Grad zu drehen, benötigen Sie den folgenden Code in Ihrem Stylesheet:

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

Sie werden aus dem oben Gesagten feststellen, dass IE8 eine andere Syntax als IE6 / 7 hat. Sie müssen beide Codezeilen angeben, wenn Sie alle Versionen von IE unterstützen möchten.

Die schrecklichen Zahlen gibt es im Bogenmaß; Sie müssen die Zahlen selbst berechnen, wenn Sie einen anderen Winkel als 45 Grad verwenden möchten (es gibt Tutorials im Internet, wenn Sie danach suchen).

Beachten Sie auch, dass die IE6 / 7-Syntax aufgrund des nicht entkoppelten Doppelpunktsymbols in der Filterzeichenfolge Probleme für andere Browser verursacht, was bedeutet, dass es sich um ungültiges CSS handelt. In meinen Tests ignoriert Firefox dadurch den gesamten CSS-Code nach dem Filter. Dies ist etwas, das Sie beachten müssen, da es stundenlange Verwirrung stiften kann, wenn Sie davon überrascht werden. Ich habe dieses Problem gelöst, indem ich das IE-spezifische Material in einem separaten Stylesheet gespeichert habe, das andere Browser nicht geladen haben.

Alle anderen aktuellen Browser (einschließlich IE9 und IE10 - yay!) Unterstützen den CSS3- transformStil (wenn auch häufig mit Herstellerpräfixen), sodass Sie den folgenden Code verwenden können, um in allen anderen Browsern den gleichen Effekt zu erzielen:

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

Hoffentlich hilft das.

Bearbeiten

Da diese Antwort immer noch auf dem neuesten Stand ist, sollte ich sie mit Informationen zu einer JavaScript-Bibliothek namens CSS Sandpaper aktualisieren, mit der Sie auch in älteren IE-Versionen (nahezu) Standard-CSS-Code für Rotationen verwenden können.

Nachdem Sie Ihrer Site CSS-Sandpapier hinzugefügt haben, sollten Sie in der Lage sein, den folgenden CSS-Code für IE6–8 zu schreiben:

-sand-transform: rotate(40deg);

Viel einfacher als der traditionelle filterStil, den Sie normalerweise im IE verwenden müssen.

Bearbeiten

Beachten Sie auch eine zusätzliche Besonderheit speziell bei IE9 (und nur bei IE9), die sowohl den Standard- transformals auch den alten IE unterstützt -ms-filter. Wenn Sie beide angegeben haben, kann dies dazu führen, dass IE9 völlig verwirrt wird und nur eine feste Blackbox gerendert wird, in der sich das Element befunden hätte. Die beste Lösung hierfür besteht darin, den filterStil durch Verwendung der oben genannten Sandpapier-Polyfüllung zu vermeiden .

— Spudley
quelle
3
Viele Dinge, die IE-Matrixtransformationsfilter verwenden, schlagen in IE10 fehl und scheinen in IE10, das alte Browser simuliert, fehlzuschlagen, da in IE10 standardmäßig "Legacy-Filter" deaktiviert sind . Ja, IE-Updates machen immer noch Probleme, auch wenn sie versuchen, Standards zu folgen. Stellen Sie also sicher, dass IE10 + Standard- transformCSS und keine MS-Filter verwendet. Wenn Sie ältere IE10-Browsermodi zum Testen älterer IE-Versionen verwenden, weisen Sie diese an, Legacy-Filter zu aktivieren. Vergessen Sie jedoch nicht, dass bei Ihren IE10 + -Benutzern Legacy-Filter deaktiviert sind . Arrrrrgggghhhhhhhhh
— user56reinstatemonica8
2
@ user568458 - Die eigentliche Meldung lautet: Verwenden Sie nicht die Kompatibilitätsmodi von IE10, um Ihre Site auf IE9 / 8/7-Kompatibilität zu testen. es ist kein guter Test; Es gibt eine Reihe von Dingen, bei denen der Kompatibilitätsmodus im Vergleich zu echten Kopien der alten IE-Versionen falsch ist. Der einzig gültige Test befindet sich in einer echten Kopie des Browsers, den Sie unterstützen möchten. Beachten Sie auch, dass Sie in IE11 ausdrücklich daran gehindert werden, dies zu tun. Die Kompatibilitätsmodi können in den Entwicklertools nicht auf die gleiche Weise geändert werden. Die einzigen verfügbaren Modi sind "Rand" und alle von der Site explizit festgelegten Modi, falls vorhanden.
— Spudley
+1 für eine gute Lösung, aber ich sollte Ihnen sagen, dass die schrecklichen Zahlen NICHT im Bogenmaß sind - es sind Sinus / Cosinus von Winkeln (in diesem Fall 45 Grad oder $ \ pi / 4 $ Radiant), die unabhängig vom Maß von sind verwendete Winkel ... die Zahlen hier sind $ \ pm \ sqrt {2} $
— danimal
58

Sie müssen eine Matrixtransformation wie folgt durchführen:

filter: progid:DXImageTransform.Microsoft.Matrix(
  M11 = COS_THETA,
  M12 = -SIN_THETA,
  M21 = SIN_THETA,
  M22 = COS_THETA,
  sizingMethod = 'auto expand'
);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
  M11 = COS_THETA,
  M12 = -SIN_THETA,
  M21 = SIN_THETA,
  M22 = COS_THETA,
  SizingMethod = 'auto expand'
)";

Wobei COS_THETA und SIN_THETA die Cosinus- und Sinuswerte des Winkels sind (dh 0.70710678für 45 °).

— zzzzBov
quelle
2
Jede andere Thread auf IE - Matrix zu übersetzen , dass ich gesprochen gesehen habe hat , als ob er auf einer Stufe mit der Stringtheorie ist und versucht hat , nicht einmal , es zu erklären - fällt Sie nur Hit brauchen sinund cosauf einem Rechner! Vielen Dank!
— user56reinstatemonica8
2
IE6 erfordert, dass die ms-Filter-Deklaration nur in einer Zeile steht, neuere Versionen haben dieses Problem nicht!
— Mister Crimson
Zusätzlich zum Kommentar von @MisterCrimson musste ich auch alles in eine Zeile innerhalb der Sass-Datei setzen.
— Karol
26

Es gibt ein Online-Tool namens IETransformsTranslator. Mit diesem Tool können Sie Matrixfiltertransformationen durchführen, die unter IE6, IE7 und IE8 funktionieren. Fügen Sie einfach Ihre CSS3-Transformationsfunktionen ein (z. B. drehen (15 Grad)), und der Rest wird erledigt. http://www.useragentman.com/IETransformsTranslator/

— nmsdvid
quelle
3
Süss! Toller Link. Ich habe die sin / cos-Tasten seit der High School nicht mehr auf einem Taschenrechner verwendet und möchte jetzt nicht besonders anfangen.
— Squarecandy
2

Nur ein Hinweis ... überlegen Sie zweimal, bevor Sie "transform: rotate ()" oder sogar "-ms-transform: rotate ()" (IE9) mit Handys verwenden!

Ich habe seit Tagen hart an die Wand geklopft. Ich habe ein "kinetisches" System, das Bilder und darüber hinaus einen Befehlsbereich schiebt. Ich habe eine Pfeiltaste "transformiert", damit sie das Zeigen nach oben und unten simuliert ... Ich habe die über 1.000 Codezeilen seit Ewigkeiten überprüft !!! ;-);

Alles in Ordnung, sobald ich transform entfernt habe: aus dem CSS drehen. Es ist ein bisschen (um keine schlechten Worte zu verwenden) schwierig, wie der IE damit umgeht, im Vergleich zu anderen Kreditnehmern.

Tolle Antwort @Spudley! Danke fürs Schreiben!

— Pedro Ferreira
quelle
2

Nützlicher Link für die IE-Transformation

Dieses Tool konvertiert CSS3-Transformationseigenschaften (die fast alle modernen Browser verwenden) in das entsprechende CSS mithilfe der von Microsoft entwickelten Visual Filters-Technologie.

— Prashant Tapase
quelle
0

Für ein IE11-Beispiel (Browsertyp = Trident-Version = 7.0):

image.style.transform = "rotate(270deg)";
— C_J
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.