In diesem Artikel werden wir Transform In verstehen im Detail und folgen Sie mit einer detaillierten praktischen Demonstration. Die folgenden Hinweise werden in diesem Artikel behandelt:
Mit der Weiterentwicklung der Website-Funktionen ist es ebenso wichtig, clevere Integrationen auf Ihrer Website bereitzustellen, um sie ansprechend und besser zu machen. Das Hinzufügen verschiedener CSS-Elemente, die Ihre Website ergänzen, ist das Gebot der Stunde.
Die Leute halten sich von Websites fern, die die Massen nicht wirklich ansprechen. Wie wäre es also mit dem Versuch, einige der Elemente zu transformieren und Ihr CSS mit einem geringeren Komprimierungswert zu verschönern?
Um ähnliche Anforderungen zu erfüllen, haben wir eine CSS-Eigenschaft zum Transformieren, mit der Elemente entweder verzerrt, gedreht, skaliert oder übersetzt werden.
Fahren Sie mit diesem Artikel über Transform In CSS fort
Was ist Transformations-CSS?
Wenn Sie ein CSS-Element transformieren, erhalten Sie eine Kante in 2D- oder 3D-Form. Es ändert visuell das Design eines Elements.
Die 2D-Transformation funktioniert auf X- und Y-Achsen. Sie können auf beiden Achsen eine beliebige Kante oder Struktur bereitstellen, um Änderungen vorzunehmen. Während für die 3D-Transformation müssen X-, Y- und Z-Achsen bearbeitet werden, um die erforderliche Tiefe bereitzustellen.
CSS 2D-Transformationseigenschaften:
| Funktion | Beschreibung |
Matrix( n, n, n, n, n, n ) | Matrix von sechs Werten |
Übersetzen( x, y ) | Ermöglicht dem Element, sich entlang der X- und der Y-Achse zu bewegen wie man Iterator Java verwendet |
translateX ( n ) | Ermöglicht dem Element, sich entlang der X-Achse zu bewegen |
translateY ( n ) | Ermöglicht dem Element, sich entlang der Y-Achse zu bewegen |
Rahmen( x, y ) | Ändert die Breite und Höhe der Elemente |
scaleX ( n ) | Ändert die Breite des Elements |
scaleY ( n ) | Ändert die Höhe eines Elements |
drehen( Winkel ) | Ermöglicht das Drehen des Elements in einem Winkel, der im Parameter angegeben ist |
schief ( x-Winkel, y-Winkel ) | Schrägt das Element entlang der X- und der Y-Achse |
skewX ( Winkel ) | Schrägt das Element entlang der X-Achse |
skewY ( Winkel ) | Schrägt das Element entlang der Y-Achse |
CSS 3D-Transformationseigenschaften:
Eigentum | Beschreibung |
verwandeln | Wendet eine 2D- oder 3D-Transformation auf ein Element an |
Transformationsursprung | Ermöglicht das Ändern der Position auf transformierten Elementen |
Transformationsstil | Gibt an, wie verschachtelte Elemente im 3D-Raum gerendert werden |
Perspektive | Gibt die Perspektive an, wie 3D-Elemente angezeigt werden |
perspektivischer Ursprung | Gibt die untere Position von 3D-Elementen an Zufallsklasse im Java-Beispiel |
Sichtbarkeit der Rückseite | Definiert, ob ein Element sichtbar sein soll, wenn es nicht auf den Bildschirm zeigt |
Beispielsweise:
css .element {width: 20px height: 20px transform: scale (20)}Wenn Sie dies tun, wird das definierte Element um das 20-fache skaliert.
Darüber hinaus können Sie für die horizontale und vertikale Skalierung auch achsenweise skalieren.
transform: scaleX (2) transform: scaleY (.5)
Um eine ordnungsgemäße Transformation für alle Browser bereitzustellen, können Sie:
Konvertierung von Zeichenfolgen in Datumsangaben in Java
div {-webkit-transform: scale (1.5) -moz-transform: scale (1.5) -o-transform: scale (1.5) transform: scale (1.5)}Die Transformations-CSS-Eigenschaft verbessert den Koordinatenraum der visuellen CSS-Formatierungsebene.
Was ist die visuelle Formatierungsstufe?
Visuelle Formatierungsebene bedeutet, ein Dokument zu verarbeiten und auf den Medienplattformen visuell darzustellen. Mit der visuellen Formatierung können Sie jedes Element als Modell transformieren, das mit dem CSS-Box-Modell übereinstimmt. Das CSS-Boxmodell definiert ein Element in einem rechteckigen Standardboxformat, das Größe, Position und Eigenschaften definiert.
Hinweis: Es können nur transformierbare Elemente transformiert werden.
Fahren Sie mit diesem Artikel über Transform In CSS fort
Was sind die verschiedenen Transformationseigenschaften?
Schauen wir uns alle transformierenden Eigenschaften an:
1.scale (): Skalieren bedeutet, die Größe des Elements entweder horizontal oder vertikal zu ändern.
Für vertikale Skalierung:scaleX
Für horizontale Skalierung:scaleY
Für ein Element können Sie auch die Schriftgröße, den Abstand, die Höhe oder die Breite ändern. Der Standardwert ist 1, was auch bedeutet, dass 0,5 angegeben wird, wenn der Wert ihn halbiert, während 2 die Skalierung verdoppelt.
2. skew (): Mit der Eigenschaft 'Versatz' kann ein Benutzer ein Element von einem Koordinatenpunkt nach rechts oder links neigen. Es ist fast so, als würde man ein Rechteck in ein Parallelogramm verwandeln. Sie können ein Element anhand seiner Koordinaten verzerren.
Beispiel:
.element {transform: skewX (25deg)} .element {transform: skewY (25deg)Wenn Sie dies tun, neigt sich das Element horizontal und vertikal um 25 Grad, indem Sie skewX oder skewY verwenden.
3. drehen ( ) : Mit dieser Eigenschaft können Sie ein Element im Uhrzeigersinn drehen. Sie können es um 180 Grad oder 360 Grad drehen, um es wieder an seinen ursprünglichen Platz zu bringen.
.element {transformieren: drehen (25 Grad)}Um auch eine Drehung bereitzustellen, können Sie eine der drei Dimensionen verwenden: rotateX, rotateY oder rotateZ.
4. übersetzen ( ) : Sie können ein Element richtig verkehrt herum oder seitwärts bewegen.
.element {transform: translate (20px, 10px)}Beim Übersetzen wird ein angegebenes Objekt / Element auf den Kopf oder seitwärts verschoben. Der erste angegebene Wert verschiebt das Objekt nach rechts (negativ bewegt es nach links) und der zweite Wert verschiebt es nach unten (wenn Sie einen negativen Wert angeben, wird es nach oben verschoben).
Wenn Sie dies verwirren könnte, wenden Sie die X-Achse an, um die Position des Elements horizontal zu ändern, und die Y-Achse, um die Position vertikal zu ändern. Das Erstaunlichste an der Transformationseigenschaft ist, dass beim Anwenden der Transformation nur das Element verschoben werden kann, wobei jedes andere Element oder jeder andere Text intakt bleibt. Der Abstand wird im Allgemeinen in Pixel oder Prozent angegeben.
Beispielsweise:
.element {transform: translateX (Wert) transform: translateY (Wert)}5. Perspektive (): Sie können eine Tiefe in der Perspektive eines Elements angeben. Es ermöglicht, einem Element eine 3D-Transformation zu geben, indem es in der Transformation kubisch gemacht wird.
translate3d (x, y, z)
translateZ (z)
translate3d (x, y, z) translateZ (z)
Die Einführung der z-Achse gibt dem Element eine 3D-Visualisierung. translateZ () bewegt das Element in Richtung des Betrachters, während ein negativer Wert es wegbewegt.
6. Matrix () : Kombiniere alle Transformationen zu einer.
drehen (45 Grad) übersetzen (24px, 25px)
Durch Anwenden von matrix () werden alle Transformationseigenschaften in einem Array kombiniert.
Das Anwenden von Transformationseigenschaften kann Ihr Element und damit die Attraktivität Ihrer Website erheblich verbessern. Probieren Sie sie aus!
Dies bringt uns zum Ende dieses Artikels über Transform In CSS.
Wenn Sie mehr über die Webentwicklung erfahren möchten, lesen Sie die von Edureka. Mithilfe der Schulung zur Webentwicklungszertifizierung erfahren Sie, wie Sie mit HTML5-, CSS3-, Twitter Bootstrap 3-, jQuery- und Google-APIs beeindruckende Websites erstellen und für Amazon Simple Storage Service (S3) bereitstellen.
Wenn Sie immer noch interessiert sind Wenn Sie Fragen haben, können Sie diese im Kommentarbereich dieses Blogs „Was ist CSS?“ Veröffentlichen. Wir werden uns so schnell wie möglich bei Ihnen melden.