CSS3 2D-Konvertierung

CSS3-Umwandlung

CSS3 Übergang, können wir bewegt, skaliert, wiederum drehen und strecken Elemente werden.

Wie funktioniert es?

Die Wirkung der Umkehr, so dass ein Element die Form, Größe und Position zu ändern.

Sie können Ihre 2D oder 3D Elemente umwandeln.

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Browser die Versionsnummer der Immobilie zu unterstützen.

Unmittelbar im Anschluss an die digitale -webkit-, -MS- oder vor zur Unterstützung der Präfix Attributnummer erste Browser-Version -moz-.

Internet Explorer 10, Firefox und Opera unterstützen Eigentum verwandeln.

Chrome und Safari erfordert das Präfix -webkit- Version.

Hinweis: Internet Explorer 9 erfordert die Präfix -MS- Version.

2D-Konvertierung

In diesem Kapitel finden Sie 2D-Konvertierungsmethode lernen:

• translate ()
• drehen ()
• Skala ()
• Skew ()
• Matrix ()

Im nächsten Kapitel werden Sie 3D-Konvertierung lernen.

Beispiele

div { Transformation: drehen (30 °) ; - Ms-Transformation: drehen (30 °) / * IE 9 * / - Webkit-transform : drehen (30 °) / * Safari und Chrome * / }

Versuchen »

translate () Methode

translate () Methode, nach links (X-Achse) und der Oberseite (Y-Achse), Position des bestimmten Parameters, bewegt sich von der aktuellen Position des Elements.

Beispiele

div { Transformation: übersetzen (50 px, 100 px) ; - Ms-Transformation: übersetzen (50 px, 100 px) / * IE 9 * / - Webkit-transform : übersetzen (50 px, 100 px) / * Safari und Chrome * / }

Versuchen »

übersetzen Wert (50px, 100px) ist ein bewegliches Element 50 Pixel von der linken Seite, und zog 100 Pixel von oben.

drehen () -Methode

drehen () Methode, in einer bestimmten Anzahl von Graden in einer Rechtsdrehung der Elemente. Ein negativer Wert zulässig ist, ist dies Drehung gegen den Uhrzeigersinn der Elemente.

Beispiele

div { Transformation: drehen (30 °) ; - Ms-Transformation: drehen (30 °) / * IE 9 * / - Webkit-transform : drehen (30 °) / * Safari und Chrome * / }

Versuchen »

drehen Wert (30deg) Elemente gedreht 30 Grad im Uhrzeigersinn.

Skala () -Methode

scale () Methode, die die Größe des Elements zu erhöhen oder zu senken, von der Breite abhängig (X-Achse) und der Höhe (Y-Achse) Parameter:

Beispiele

-ms-transform : Skala (2,3) ; / * IE 9 * / -webkit-transform : Skala (2,3); / * Safari * / Transformation: Skala (2,3); / * Standard - Syntax * /

Versuchen »

Übergangsbreite Skala (2,3) ist das Zweifache seiner ursprünglichen Größe und das Dreifache der Größe seiner ursprünglichen Höhe.

Skew () -Methode

skew () Methode, wobei das Element entsprechend der Querrichtung (X-Achse) und vertikal (Y-Achse) Leitungsparameter für einen gegebenen Winkel:

Beispiele

div { Transformation: Skew (30 °, 20 °) ; - Ms-Transformation: Skew (30 °, 20 °) / * IE 9 * / - Webkit-transform : Skew (30 °, 20 °) / * Safari und Chrome * / }

Versuchen »

skew (30deg, 20deg) ist ein Element der X-Achse und Y-Achse um 20 Grad um 30 Grad.

Matrix () Methode

Matrix () Methode und die Methode der 2D-Umwandlung zu einer verschmolzen.

Matrix-Methode hat sechs Parameter, einschließlich der Rotation, Skalierung, Verschieben (Panning) und Neigefunktionen.

Beispiele

Die Verwendung von Matrix () -Methode des rotierenden div-Element 30 °

div { Transformation: matrix (0,866, 0,5, - 0,5, 0,866, 0, 0) ; - Ms-Transformation: matrix ( 0,866, 0,5, - 0,5, 0,866, 0, 0) / * IE 9 * / - Webkit-transform : Matrix (0,866, 0,5, - 0,5, 0,866, 0, 0) / * Safari und Chrome * / }

Versuchen »

Neue Konversionseigenschaft

Es folgt eine Liste aller Umwandlungseigenschaften:

2D-Umwandlungsverfahren