Wie zu transformieren Objekte mit CSS3
In CSS3, ein verwandeln ändert sich das Erscheinungsbild von Objekten in einer bestimmten Weise dem Bildschirm. Zum Beispiel könnten Sie das Objekt oder Skew seine Dimensionen drehen. Wandelt machen es einfach, einzigartige Präsentationen von gemeinsamen Objekte zu erstellen - Effekte, die normalerweise Sie einen Designer oder Grafiker für Sie zu erstellen brauchen würde. Die folgende Liste beschreibt die Arten von Transformationen Sie ausführen können.
Matrix (a, b, c, d, tx, ty): Neigt das Objekt eine Matrix von Punkten a, b, c und d definiert ist. Er übersetzt dann die Position des Objekts auf dem Bildschirm durch einen Wert von tx und ty bezeichnet. (Können Sie versuchen, die Matrix () umwandeln aus an w3schools.com.)
Es gibt Versionen für viele dieser Funktionen, die auf dreidimensionalen Objekten arbeiten. Zum Beispiel ist es eine matrix3d () Funktion. Diese Funktionen fügen Sie ein z-Achse der Gleichung, so dass Sie manipulieren dreidimensionale Objekte in einem dreidimensionalen Raum. Sie können mehr darüber lesen, wie die 3D-Versionen arbeiten an Mozilla Developer Network und CSS-Tricks.
(Tx, ty) übersetzen, translateX (tx), translateY (ty): Ändert die Position des Objekts auf dem Bildschirm durch eine horizontale Menge von tx definiert, eine vertikale Höhe von ty definiert, oder beides. (Können Sie versuchen, die translate () verwandeln bei w3schools.com.)
Skala (x, y), scaleX (x), scaleY (y): Dehnt das Objekt horizontal durch die durch x angegebene Menge, vertikal durch die Menge von y angegeben ist, oder beides. (Können Sie versuchen, die Skala () transformieren bei w3schools.com.)
drehen (Winkel), rotateX (Winkel), rotateY (Winkel): Dreht das Objekt durch die Anzahl der Grad in der gewünschten Achse angegeben. (Können Sie versuchen, die drehen () verwandeln bei w3schools.com.)
Internet Explorer nicht alle der Transformationen unterstützen. Zum Beispiel werden Sie Internet Explorer 9 unterstützt nicht die rotateX () und rotateY () Funktionen finden, dass.
Skew (angleX, Angley), skewX (angleX), skewY (Angley): Neigt das Objekt durch die Anzahl der Grad horizontal durch angleX angegeben, die Anzahl der Grad vertikal von Angley angegeben, oder beides. (Können Sie versuchen, die Skew () transformieren bei w3schools.com.)
Der beste Weg, diese Transformationen zu verstehen, ist es, sie in Aktion zu sehen. Das folgende Verfahren hilft Ihnen, eine Beispielanwendung erstellen, die die Transformationen zeigt, die Sie ausführen können.
Erstellen Sie eine neue HTML5-Datei mit einem Texteditor.
Geben Sie den folgenden Code für die HTML-Seite.
Beispiele für Wandelt Matrix
Übersetzen
Rahmen
Drehen
Drehen Y
Schiefe
Das Beispiel zeigt die Transformationen als Absätzen aufgeführt. Sie können andere Transformationen versuchen durch das Beispiel (eine gute Idee) zu modifizieren.
Speichern Sie die Datei als Transforms.HTML.
Erstellen Sie eine neue CSS-Datei mit einem Texteditor.
Geben Sie den folgenden CSS-Style-Informationen.
#Matrix {Border: solid-border-color: Black-border-width: thin-font-size: 30px; margin: 50px; width: 140px; height: 40px; Transformation: 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) -} # Übersetzen {border: Fest-border-color: Black-border-width: thin-font-size: 30px; margin: 50px; width: 140px; height: 40px; verwandeln: translate (20px, 30px) - ms-transform: translate (20px, 30px) - webkit-transform: translate (20px, 30px) -} # Skala {border: solid-border-color: Black-border-width: thin-font-size: 30px; margin: 50px; width: 140px; Höhe : 40px; verwandeln: Skala (1,6, 0,75) - ms-transform: Skala (1,6, 0,75) - webkit-transform: Skala (1,6, 0,75) -} # Drehen {border: solid-border-color: Black- border-width: thin-font-size: 30px; margin: 50px; width: 140px; height: 40px; verwandeln: drehen (140deg) - ms-transform: rotate (140deg) - webkit-transform: rotate (140deg) -} # rotateY {border: solid-border-color: Black-border-width: thin-font-size: 30px; margin: 50px; width: 140px; height: 40px; verwandeln: rotateY (140deg) - ms-Transformation : rotateY (140deg) - webkit-transform: rotateY (140deg) -} # Skew {border: solid-border-color: Black-border-width: thin-font-size: 30px; margin: 50px; width: 140px; height: 40px; Transformation: Skew (15deg, 30deg) - ms-transform: Skew (15deg, 30deg) - webkit-transform: Skew (15deg, 30deg) -}Jede dieser Transformationen verwendet genau die gleichen Absatzformat, so dass Sie besser zu verstehen, wie sie funktionieren. Die Verwendung einer Grenze macht es leichter, die Transformation zu verstehen, weil die Kombination von Wörtern und eine am Bildschirm angezeigte Objekt mehr Informationen (etwas zu erinnern, wenn Sie Ihre eigenen Test-Anwendungen zu erstellen) vermitteln.
Transformationen werden als experimentelle, obwohl sie als Teil der Beschreibung erscheinen. Um sie mit dem Internet Explorer 9+ zu verwenden, müssen Sie das -MS- Präfix enthalten. Sowohl Safari und Chrome erfordern die -webkit- Präfix. Aus diesem Grund sehen Sie jeweils dreimal aufgeführt verwandeln. Die Transformationen sollten auch sowohl mit Opera und Firefox ohne Probleme arbeiten.
Speichern Sie die Datei als Transforms.CSS.
Laden Sie das Beispiel setzt.
Sie sehen die Transformation Effekte. Alle diese Transformationen sind mit der gleichen Schriftart, Schriftgröße und Kastengröße, so dass die Unterschiede sind Sie sehen ausschließlich auf die Transformation stattfindet. Beachten Sie, dass die rotateY () Transformation tatsächlich den Text rückwärts zeigt.
Versuchen Sie, die Transformationswerte zu modifizieren, um zu sehen, wie sich die Änderungen auf den Ausgang auswirken. Sie werden überrascht sein, wie flexibel diese Funktionen sind.
Es ist möglich, Transformationen zu kombinieren, noch ungewöhnlicher Effekte zu erzeugen. trennen Sie diese einfach durch ein Leerzeichen. Um zum Beispiel ein Drehen () mit einem Skew zu kombinieren (), dann würden Sie geben Transformation: drehen (25deg) Skew (15deg, 30deg) -.