CSS-Rotationseigenschaft im IE

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?

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 .

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 °).

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/

http://css3please.com/

Scrollen Sie für das Microsoft IE9 + -Präfix nach unten zu '.box_rotate'. Ähnliche Diskussion hier: Drehen eines Div-Elements in jQuery

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!

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.

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

image.style.transform = "rotate(270deg)";