CSS3-Animationstechnologie, die Sie kennen müssen (2)

übersetzen

Der Name „übersetzen“ ist etwas irreführend. Dabei handelt es sich eigentlich um eine Methode zur Positionierung von Elementen mithilfe von X- und Y-Koordinatenwerten.

Nachfolgend der zitierte Inhalt: #nav{ /* Dies verschiebt das Navigationselement um 10 Pixel nach links und 20 Pixel nach unten */ -moz-transform: Translate(10px, 20px); -webkit-transform: Translate(10px, 20px); }

Browserunterstützung

Das Translate-Attribut wird derzeit nur von Firefox, Safari und Chrome unterstützt und muss die privaten Präfixe -moz- und -webkit- des Browsers verwenden.

Schräg

Skew ist auch eine nützliche Transformationsfunktion, die ein Objekt in einem bestimmten Winkel um die x- und y-Achse neigen kann. Dies unterscheidet sich von der Drehung von Rotate, bei der nur gedreht wird, ohne die Form des Elements zu ändern. Schräge verändert die Form eines Elements. Skew hat zwei Parameter, die die Neigung der x- bzw. y-Achse darstellen.

Nachfolgend der zitierte Inhalt: #nav{ /* Dies verschiebt das Navigationselement um 10 Pixel nach links und 20 Pixel nach unten */ -moz-transform: skew(30deg, -10deg); -webkit-transform: skew(30deg, -10deg); }

Browserunterstützung

Das Skew-Attribut wird derzeit nur von Firefox, Safari und Chrome unterstützt und verwendet auch die privaten Präfixe des Browsers -moz- und -webkit-.

Matrix

Ja, Matrix ist eine sehr grundlegende Sache in der fortgeschrittenen Mathematik und in der Tat eine sehr fortgeschrittene Funktion in CSS 3. CSS 3 führt die Matrixfunktion ein, die die oben genannten verschiedenen Effekte sehr flexibel realisieren kann. Es hat 6 Parameter (a, b, c, d, e, f), was eigentlich eine 3*3-Matrix ist, durch die die alten Parameter in neue Werte umgewandelt werden:

|. abe |

|. cdf |

|. 0 0 1 |

Wenn Sie sich eingehend damit befassen möchten, können Sie hier einen Blick darauf werfen : http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined . Dies ist ein Dokument für SVG, aber das Prinzip der Matrixtransformation ist universell .

Schauen wir uns ein Beispiel an:

Nachfolgend der zitierte Inhalt: #nav{ /* Das Navigationselement wird wie die obere rechte Ecke geneigt*/ -moz-transform: Matrix(1, -0,2, 0, 1, 0, 0); -webkit-transform: Matrix(1, -0,2, 0, 1, 0, 0); }

Browserunterstützung

Die gute Nachricht ist, dass der IE Matrixfilter unterstützt. Obwohl er die meisten CSS3-Transformationsfunktionen nicht unterstützt, können Sie mit diesem Filter grundsätzlich den gleichen Effekt erzielen. Sowohl Webkit als auch Firefox (3.5+) unterstützen diese Funktion.

Kettenverformung

Transformationen sind oft eigenständig, aber wenn Sie mehrere Transformationen gleichzeitig verwenden möchten, kann der Code schnell integriert werden, insbesondere durch die Verwendung privater Erweiterungen. Glücklicherweise haben wir einige eingebaute Abkürzungen:

Nachfolgend der zitierte Inhalt: #nav{ -moz-transform: Translate(10, 25); -webkit-transform: Translate(10, 25); -moz-transform: rotieren (90 Grad); -webkit-transform: rotieren (90 Grad); -moz-transform: Skala(2, 1); -webkit-transform: Skala(2, 1); }

Diese Transformationen können miteinander verkettet werden, um Ihren Code effizienter zu gestalten:

Nachfolgend der zitierte Inhalt: Navigation{ -moz-transform: Translate(10, 25) Rotate(90deg) Scale(2, 1); -webkit-transform: Translate(10, 25) Rotate(90deg) Scale(2, 1); }

Die wahre Kraft dieser Eigenschaften vereint sich. Sie können alle Elemente auf Inline- und Blockebene verschieben, drehen, skalieren und steuern, ohne JavaScript zu verwenden. Sobald die Unterstützung dieser Eigenschaften weiter verbreitet ist, können wir umfangreichere und leichtere Schnittstellen und Anwendungen erstellen.

Transformationsursprung

transform-origin ist keine Unterfunktion von transform, aber sehr eng mit transform verbunden. Es kann verwendet werden, um den Startpunkt der Transformation anzugeben. Der Standardstartpunkt der Rotationstransformation ist beispielsweise die Mitte. Sie können den Startpunkt in der oberen linken Ecke oder in der unteren linken Ecke festlegen Die Rotationstransformation kann sehr unterschiedlich sein.

transform-origin akzeptiert zwei Parameter, bei denen es sich um bestimmte Werte wie Prozentsatz, em, px usw. oder beschreibende Parameter wie links, Mitte, rechts oder oben, Mitte, unten usw. handeln kann. Ein paar Beispiele:

Nachfolgend der zitierte Inhalt: .class1{-moz-transform-origin: 0 0; -webkit-transform-origin: 0 0; ... } .class2{-moz-transform-origin:100 % 100 %; -webkit-transform-origin:100 % 100 %; ...} .class3{-moz-transform-origin:top left; -webkit-transform-origin:oben links; ...}

Browserkompatibilität

Dieses Attribut wird derzeit nur von Webkit und Firefox unterstützt und erfordert das Hinzufügen eines eigenen privaten Präfixes.