Wie man Objekte mit CSS3 umwandelt

Wie man Objekte mit CSS3 - Dummies

In CSS3 ändert eine Transformation das Aussehen von Objekten auf dem Bildschirm auf eine bestimmte Weise. Zum Beispiel könnten Sie das Objekt drehen oder seine Abmessungen verzerren. Transformationen machen es einfach, aus gängigen Objekten einzigartige Präsentationen zu erstellen - Effekte, für die normalerweise ein Designer oder Grafiker benötigt wird. In der folgenden Liste werden die Arten von Transformationen beschrieben, die Sie durchführen können.

  • Matrix (a, b, c, d, tx, ty): Schiebt das Objekt unter Verwendung einer Matrix, die durch die Punkte a, b, c und d definiert ist. Es übersetzt dann die Position des Objekts auf dem Bildschirm um einen Wert, der mit tx und ty bezeichnet ist. (Sie können versuchen, die Matrix () in w3schools. Com.)

    Es gibt Versionen von vielen dieser Funktionen, die an dreidimensionalen Objekten arbeiten. Zum Beispiel gibt es eine matrix3d ​​() -Funktion. Diese Funktionen fügen der Gleichung eine z -Achse hinzu, sodass Sie dreidimensionale Objekte im dreidimensionalen Raum bearbeiten können. Sie können mehr darüber erfahren, wie die 3D-Versionen in Mozilla Developer Network und CSS-Tricks funktionieren.

  • übersetzen (tx, ty), translateX (tx), translateY (ty): Ändert die Position des Objekts auf dem Bildschirm um einen horizontalen Betrag, der durch tx, einen durch ty definierten vertikalen Betrag oder beides definiert wird. (Sie können die translate () - Transformation bei w3schools.com ausprobieren.)

  • Skalierung (x, y), SkalierungX (x), SkalierungY (y): Streckt das Objekt horizontal um den durch x angegebenen Wert, vertikal um den mit y angegebenen Wert oder beides. (Sie können die scale () - Transformation bei w3schools. Com ausprobieren.)

  • drehen (angle), rotateX (angle), rotateY (angle): Dreht das Objekt um die in der gewünschten Achse angegebene Gradzahl. (Sie können die rotate () - Transformation bei w3schools.com ausprobieren.)

    Internet Explorer unterstützt nicht alle Transformationen. Beispielsweise werden Sie feststellen, dass Internet Explorer 9 die Funktionen rotateX () und rotateY () nicht unterstützt.

  • skew (angleX, angleY), skewX (angleX), skewY (angleY): Schiebt das Objekt um die durch den WinkelX horizontal angegebene Anzahl von Graden, die vertikal durch den WinkelY angegebene Anzahl von Graden oder beides. (Sie können die Umwandlung von skew () in w3schools.com ausprobieren.)

Der beste Weg, diese Transformationen zu verstehen, besteht darin, sie in Aktion zu sehen. Mit der folgenden Prozedur können Sie eine Beispielanwendung erstellen, die die von Ihnen durchführbaren Umwandlungen veranschaulicht.

  1. Erstellen Sie eine neue HTML5-Datei mit Ihrem Texteditor.

  2. Geben Sie den folgenden Code für die HTML-Seite ein.

     Beispiele für Transformationen 

    Matrix

    Übersetzen

    Skalieren

    Drehen

    Drehen Y

    Schrägen

    Das Beispiel veranschaulicht die als Absätze aufgelisteten Transformationen.Sie können andere Transformationen ausprobieren, indem Sie das Beispiel modifizieren (eine großartige Idee).

  3. Speichern Sie die Datei als Transformationen. HTML.

  4. Erstellen Sie eine neue CSS-Datei mit Ihrem Texteditor.

  5. Geben Sie die folgenden CSS-Stilinformationen ein.

     #Matrix {Rand: fest; Randfarbe: Schwarz; Randbreite: dünn; Schriftgröße: 30px; Rand: 50px; Breite: 140px; Höhe: 40px; transformieren: Matrix (0, 866, 0, 5, 0, 4, 0, 866, 5, 15); -ms-transform: Matrix (0..866, 0. 5, 0. 4, 0. 866, 5, 15); -webkit-transform: matrix (0..866, 0. 5, 0. 4, 0. 866, 5, 15);} #Translate {border: solid; Randfarbe: Schwarz; Randbreite: dünn; Schriftgröße: 30px; Rand: 50px; Breite: 140px; Höhe: 40px; transformieren: übersetzen (20px, 30px); -ms-transform: Übersetzen (20px, 30px); -webkit-transform: übersetzen (20px, 30px);} #Scale {border: solid; Randfarbe: Schwarz; Randbreite: dünn; Schriftgröße: 30px; Rand: 50px; Breite: 140px; Höhe: 40px; transformieren: Maßstab (1, 6, 0, 75); -ms-transform: Skalierung (1. 6, 0. 75); -webkit-transform: scale (1. 6, 0. 75);} #Rotieren {border: solid; Randfarbe: Schwarz; Randbreite: dünn; Schriftgröße: 30px; Rand: 50px; Breite: 140px; Höhe: 40px; transformieren: drehen (140 Grad); -ms-transform: rotieren (140deg); -webkit-transform: rotate (140deg);} #RotateY {Grenze: fest; Randfarbe: Schwarz; Randbreite: dünn; Schriftgröße: 30px; Rand: 50px; Breite: 140px; Höhe: 40px; transformieren: rotateY (140deg); -ms-transform: rotateY (140deg); -webkit-transform: rotateY (140deg);} #Skew {Umrandung: fest; Randfarbe: Schwarz; Randbreite: dünn; Schriftgröße: 30px; Rand: 50px; Breite: 140px; Höhe: 40px; transformieren: Schräglage (15 Grad, 30 Grad); -ms-transform: Schiefe (15 Grad, 30 Grad); -webkit-transform: skew (15deg, 30deg);} 

    Jede dieser Transformationen verwendet genau das gleiche Absatzformat, damit Sie besser verstehen, wie sie funktionieren. Die Verwendung eines Rahmens erleichtert das Verständnis der Transformation, da die Kombination von Wörtern und einem Onscreen-Objekt mehr Informationen vermittelt (etwas, das Sie beim Erstellen Ihrer eigenen Testanwendungen beachten müssen).

    Transformationen gelten als experimentell, auch wenn sie als Teil der Spezifikation erscheinen. Um sie mit Internet Explorer 9+ verwenden zu können, müssen Sie das Präfix -ms- angeben. Sowohl Safari als auch Chrome benötigen das Präfix -webkit. Deshalb sehen Sie jede Transformation dreimal aufgelistet. Die Transformationen sollten ohne Probleme auch mit Opera und Firefox funktionieren.

  6. Speichern Sie die Datei als Transformationen. CSS.

  7. Laden Sie das Transformationsbeispiel.

    Sie sehen die Transformationseffekte. Alle diese Transformationen verwenden die gleiche Schriftart, Schriftgröße und Boxgröße, so dass die Unterschiede, die Sie sehen, nur auf die stattfindende Transformation zurückzuführen sind. Beachten Sie, dass die Umwandlung von rotateY () den Text tatsächlich rückwärts zeigt.

    Versuchen Sie, die Transformationswerte zu ändern, um zu sehen, wie sich die Änderungen auf die Ausgabe auswirken. Sie werden überrascht sein, wie flexibel diese Funktionen sind.

Es ist möglich, Transformationen zu kombinieren, um noch ungewöhnlichere Effekte zu erzielen. Trennen Sie sie einfach durch ein Leerzeichen. Um zum Beispiel ein rotate () mit einem skew () zu kombinieren, geben Sie transform ein: rotate (25deg) skew (15deg, 30deg); .