Ein Einblick in CSS3 2D-Transformationen
Das Transformationsmodul ist eine enorme Ergänzung in CSS3. Sie ermöglicht es, Elemente auf einer Website auf die nächste Stufe zu bringen.
Es gibt einige Experimente, die mich wirklich in Erstaunen versetzen, Beispiele wie dieses. Wir werden jedoch nicht so etwas wie ein reines CSS-Symbol erstellen, das sich irgendwie in ein Autobot verwandeln kann, da es überwältigend sein kann und auch im wirklichen Leben nicht ganz brauchbar ist.
Stattdessen werden wir dieses Mal einen Schritt zurücktreten und die Grundlagen der 2D-Transformationen von CSS3 überprüfen, um zu sehen, wie es auf einer grundlegenden Ebene funktioniert.
Die Syntax
Das CSS3 Transformations-Modul ermöglicht es uns grundsätzlich, ein Element bis zu einem gewissen Grad zu transformieren, z. B. Übersetzen, Skalieren, Drehen und Neigen.
Die offizielle Syntax lautet transform: Methode (Wert). Wie alle anderen großen CSS3-Ergänzungen, die sich noch in den Anfängen befinden, benötigen die aktuellen Browser jedoch noch die Syntaxversion, um die Transformationen auszuführen. Die vollständige Syntax würde also folgendermaßen aussehen:
transform: Methode (Wert); / * W3C Offizielle Syntax * / -o-transform: Methode (Wert); / * Opera 10.5+ * / -ms-transform: Methode (Wert); / * Internet Explorer 9.0+ * / -moz-transform: Methode (Wert); / * Firefox 3.6+ * / -webkit-transform: Methode (Wert); / * Chrome / Safari 3.2+ * /
Die Methode, auf die wir uns oben beziehen, ist die Transformationsfunktionen, die durch eine der folgenden ersetzt werden könnte: Übersetzen(), Rahmen(), drehen() oder Schräglage ().
Der Wert
Der meiste Wert der Methode entspricht dem X-Achse und Y-Achse. Wenn Sie sich an das kartesische Koordinatensystem aus Ihrer Math-Klasse in der High School erinnern, ist das Grundprinzip ziemlich ähnlich, die X-Achse repräsentiert die horizontal Linie und die Y-Achse steht für die Vertikale Linie.
Außer für Rotationen. Das Drehung wird das verwenden Polar Koordinaten was in Grad ausgedrückt wird, der von 0 bis 360 reicht.
Die Werte für alle Methoden können sowohl negativ als auch positiv sein. Beachten Sie jedoch, dass die Webseite sequentiell von oben nach unten gelesen wird. Dadurch wird die Y-Achse im Web gegenüber dem ursprünglichen Prinzip der kartesischen Koordinaten umgekehrt. Dies bedeutet, wenn Sie einen negativen Wert hinzufügen Y-Achse, es wird stattdessen nach oben verschoben.
Die Transformationen verwenden
Sehen wir uns nun die folgende grundlegende Demonstration an, um Transformation in Aktion zu sehen.
Ich übersetze
Lass dich nicht vom Begriff trüben Übersetzen, Es wird keine Fremdsprache übersetzen. Das Übersetzen Hier ist eigentlich eine Methode, um Elemente in eine bestimmte Richtung zu bewegen.
Die Methode enthält zwei Werte. X und Y. das X-Wert wie oben erwähnt, wird das Element horizontal aufgenommen. nach links oder nach rechts, während Y Wert wird es vertikal zu der Boden oder nach oben.
Im Folgenden sehen Sie einige einfache Demonstrationen:
div Breite: 100px; Höhe: 100px; transform: translate (100px, 250px);
Das obige Snippet bewegt das Element um 100 Pixel nach rechts und 250 Pixel nach unten.
div Breite: 100px; Höhe: 100px; transform: translate (100px, 0);
Das obige Snippet bewegt das Element für 100px nach rechts, da wir die Y-Achse auf Null setzen. Wenn Sie das Element dann nach links verschieben möchten, müssen Sie die X-Achse nur wie folgt negativ setzen:
div Breite: 100px; Höhe: 100px; transform: translate (-100px, 0);
- "Übersetzen" Demo
Alternativ können wir das Element mit diesen einzelnen Methoden in eine Richtung bewegen. translateX () und translateY (), Der Unterschied ist, dass jede dieser Methoden nur einen Wert akzeptiert.
Also praktisch die transform: übersetzen (-100px, 0) ist auch gleich transform: translateX (-100px).
II - Maßstab
Das Rahmen Methode erlaubt es uns vergrößern oder verkleinern die Elemente von ihrer tatsächlichen Größe. Der Wert der Skala ist derselbe wie der Übersetzen Diese Methode enthält auch X und Y. Der einzige Unterschied besteht darin, dass wir die Einheit nicht angeben. Hier ist ein Beispiel:
div Breite: 100px; Höhe: 100px; Transformation: Skala (1,5);
Das obige Beispiel vergrößert die div 1,5 oder 150% von seiner tatsächlichen Größe, und da wir ihn gleichermaßen für die X- und Y-Richtungen skalieren, müssen wir ihn nur in einem Wert angeben. Sie können es auch auf diese Weise deklarieren Transformation: Maßstab (1,5, 1,5); Wenn Sie mehr Details wollen, wird es genauso sein.
Wenn wir das Element reduzieren möchten, würden wir wie im Beispiel unten speziell einen Wert von 0,999 auf absolute 0 verwenden, wodurch die Größe des div um 50% oder die Hälfte verringert wird:
div Breite: 100px; Höhe: 100px; Transformation: Skala (0,5);
Seien Sie jedoch vorsichtig, wenn Sie den Wert auf absolut setzen “0” das div verschwindet einfach, wenn Sie also keinen triftigen Grund dafür haben, würde ich es nicht empfehlen.
- "Scale" Demo
III - drehen
Wie wir bereits in diesem Beitrag erwähnt haben, die drehen Die Methode verwendet Polarkoordinaten, daher wird der Wert in Grad angegeben. Hier sind zwei Beispiele
Das folgende Snippet dreht das div 30 Grad im Uhrzeigersinn.
div Breite: 100px; Höhe: 100px; verwandeln: drehen (30 Grad);
Ein negativer Wert, wie im nachstehenden Beispiel dargestellt, dreht die div in entgegengesetzter Richtung (entgegen dem Uhrzeigersinn) im gleichen Grad.
div Breite: 100px; Höhe: 100px; umwandeln: drehen (-30 Grad);
- Demo "Drehen"
IV - Skew
Das Schräglauf Methode ermöglicht es uns, eine Art Parallelogramm zu erstellen. Es enthält auch zwei Werte der X- und Y-Achse. Der Wert selbst wird jedoch in Grad angegeben und nicht wie bei der linearen Messung Rahmen oder der Übersetzen Methode. Hier ist ein Beispiel:
div Breite: 200px; Höhe: 100px; Transformation: Schrägstellung (30 Grad, 10 Grad);
- Demo "Skew"
V - Multiple Methode
Das verwandeln Diese Eigenschaft ist nicht darauf beschränkt, nur eine Methode zu behandeln. Tatsächlich können wir mehrere Methoden in einzelne Deklarationen einschließen, z.
div Breite: 100px; Höhe: 100px; transform: translateX (100px) drehen (45 Grad);
Das obige Snippet bewegt das Element um 100 Pixel nach rechts und dreht sich gleichzeitig um 45 Grad.
Demo "Multiple Method".
Ursprung umwandeln
Das Ursprungsland - wie der Name schon sagt - wird verwendet, um den Startpunkt der Transformation zu steuern. Wenn wir diese Eigenschaft nicht explizit mit der folgenden Syntax deklarieren Transformationsursprung: X Y;, Dann nimmt der Browser den Standardwert an, der 50% für X und 50% für Y ist.
Nun, wenn wir das angeben Ursprung verwandeln auf 0 (X) 0 (Y) beginnt die Transformation oben links.
Alle Browser benötigen weiterhin die Präfixversion, um diese Eigenschaft aufzurufen. Hier ist die vollständige Version, um sicherzustellen, dass sie in den meisten aktuellen Browsern funktioniert:
-Webkit-Transformationsursprung: X Y; -moz-transform-origin: X Y; -o-Transformationsursprung: X Y; -ms-transform-Ursprung: X Y; Transformationsursprung: X Y;
- "Transform-origin" Demo
Fazit
Wir haben alle vier wesentlichen Transformationsmethoden durchlaufen; übersetzen, skalieren, drehen und neigen
Wie bereits erwähnt, befindet sich dieses Modul jedoch noch in einem frühen Stadium. Wenn Sie diese Methoden in Ihrer nächsten Website anwenden, stellen Sie sicher, dass es für inkompatible Browser ordnungsgemäß abgebaut wird (ich beziehe mich hier nicht auf IE6)..
Zuletzt können Sie die gesamte Demo anzeigen oder die Quelle über die folgenden Links herunterladen.
- Demo
- Quelle herunterladen
