CSS-Transformationen – Übersetzen, Drehen, Skalieren und Neigen

Vorlesung 12: CSS-Transformationen – Übersetzen, Drehen, Skalieren und Neigen

Willkommen zur zwölften Vorlesung des Kurses „Basic to Brilliance“. Heute beschäftigen wir uns mit CSS-Transformationen, einer leistungsstarken Funktion, mit der Sie die Position, Größe und Ausrichtung von Elementen manipulieren können. Wir behandeln die Grundlagen von Transformationsfunktionen wie Translate(), Rotate(), Scale() und Skew().

1. Überblick über die Eigenschaft „Transformieren“

Mit der Transformationseigenschaft können Sie verschiedene Transformationen auf Elemente anwenden, z. B. Verschieben, Drehen, Skalieren und Neigen. Diese Transformationen werden relativ zur ursprünglichen Position des Elements angewendet.

• Syntax:

  transform: transform-function(value);

2. Übersetzen

Die Funktion Translate() verschiebt ein Element von seiner ursprünglichen Position entlang der X- und Y-Achse. Sie können Werte in Pixeln (px), Prozentsätzen (%) oder anderen Einheiten angeben.

• Beispiel: Verschieben eines Elements um 50 Pixel nach rechts und 30 Pixel nach unten.

  .box {
    transform: translate(50px, 30px);
  }

In diesem Beispiel wird das .box-Element von seiner ursprünglichen Position um 50 Pixel nach rechts und 30 Pixel nach unten verschoben.

3. Drehen

Die Funktion „rotate()“ dreht ein Element um einen festen Punkt, der standardmäßig die Mitte des Elements ist. Der Drehwinkel wird in Grad (deg) angegeben.

• Beispiel: Drehen eines Elements um 45 Grad.

  .box {
    transform: rotate(45deg);
  }

In diesem Fall wird das .box-Element um 45 Grad im Uhrzeigersinn um seinen Mittelpunkt gedreht.

4. Maßstab

Die Funktion „scale()“ ändert die Größe eines Elements. Sie können Skalierungsfaktoren für die X- und Y-Achse angeben. Ein Wert von 1 bedeutet die ursprüngliche Größe des Elements, während Werte größer oder kleiner als 1 die Größe erhöhen bzw. verringern.

• Beispiel: Skalieren eines Elements auf das 1,5-fache seiner ursprünglichen Größe.

  .box {
    transform: scale(1.5);
  }

In diesem Beispiel wird das .box-Element auf 150 % seiner Originalgröße skaliert.

5. Schräglage

Die Funktion skew() neigt das Element entlang der X- und Y-Achse. Die Winkel werden in Grad (deg) angegeben.

• Beispiel: Neigen eines Elements um 20 Grad entlang der X-Achse und 10 Grad entlang der Y-Achse.

  .box {
    transform: skew(20deg, 10deg);
  }

In diesem Fall wird das .box-Element horizontal um 20 Grad und vertikal um 10 Grad geneigt.

6. Kombinieren von Transformationsfunktionen

Sie können mehrere Transformationsfunktionen in einer einzigen Transformationseigenschaft kombinieren. Die Funktionen werden in der Reihenfolge angewendet, in der sie erscheinen.

• Beispiel: Kombination von Verschieben, Drehen und Skalieren.

  .box {
    transform: translate(50px, 30px) rotate(45deg) scale(1.5);
  }

In diesem Beispiel:

• Die .box wird zunächst übersetzt, dann gedreht und schließlich skaliert. Jede Transformation wird nacheinander angewendet.

7. Ursprung transformieren

Die Eigenschaft transform-origin gibt den Punkt an, um den herum die Transformationen stattfinden. Standardmäßig ist dies der Mittelpunkt des Elements, Sie können ihn jedoch auf einen beliebigen Punkt ändern.

• Beispiel: Ändern des Transformationsursprungs in die obere linke Ecke.

  .box {
    transform-origin: top left;
    transform: rotate(45deg);
  }

In diesem Fall dreht sich die .box um 45 Grad um ihre obere linke Ecke und nicht um ihre Mitte.

8. 3D-Transformationen

CSS unterstützt auch 3D-Transformationen. Sie können Funktionen wie perspective(),RotateX(),RotateY() und TranslateZ() verwenden, um 3D-Effekte zu erstellen.

• Beispiel: Perspektive hinzufügen, um einen 3D-Effekt zu erzeugen.

  .container {
    perspective: 1000px;
  }

  .box {
    transform: rotateY(45deg);
  }

In diesem Beispiel:

• Das .container-Element bietet Perspektive und lässt die .box scheinbar im 3D-Raum rotieren.

Übungsübung

1. Erstellen Sie mithilfe von CSS-Transformationen eine Kartenumdrehungsanimation. Die Karte sollte sich beim Schweben um 180 Grad drehen, um die Rückseite freizulegen.
2. Experimentieren Sie mit der Kombination von Verschieben, Drehen und Skalieren, um einen einzigartigen Effekt auf ein Element zu erzielen.

Als Nächstes: In der nächsten Vorlesung befassen wir uns mit CSS-Animationen und lernen, wie Sie dynamische, animierte Effekte für Ihre Webelemente erstellen. Machen Sie sich bereit, Ihre Designs mit Bewegung zum Leben zu erwecken!

Folgen Sie mir auf LinkedIn-

Ridoy Hasan

Das obige ist der detaillierte Inhalt vonCSS-Transformationen – Übersetzen, Drehen, Skalieren und Neigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!