CSS transform für Anfänger erklärt

Kategorie: HTML/CSS

Mit CSS transform verändern Sie die Objekte auf Ihrer Website. Verschieben, vergrößern, verkleinern, drehen oder scheren Sie HTML-Elemente.

Inhalt

• CSS transform:translate – Objekte verschieben
• CSS transform:rotate – Objekte drehen
• CSS transform-origin – Rotationspunkt der Drehung verschieben
• CSS transform: scale – Größenverhältnisse ändern
• CSS transform: skew – Objekte scheren

 

CSS transform:translate – Objekte verschieben

Platzieren Sie einen div-Container und verschieben Sie ihn mit der CSS Anweisung transform und der Eigenschaft translate.

#objekt{
transform:translate(x,y);
}
// x:Verschiebung nach rechts;
// y:Verschiebung nach unten;

Um den div-Container #objekt 150 Pixel nach rechts und 50 Pixel nach unten zu verschieben, verwenden Sie diesen Code:

<div id="objekt"></div>

// CSS-Code:
#objekt{
transform:translate(150px,50px);
}

Die Anweisung verschiebt das Objekt in Relation zum ursprünglichen Standort.

CSS transform:rotate – Objekte drehen

Verwenden Sie die transform-Eigenschaft rotate, um HTML-Elemente zu drehen. Dabei bedeuten positive Angaben eine Drehung mit dem Uhrzeigersinn, während bei einer negativen Gradzahl eine Drehung gegen den Uhrzeigersinn erfolgt.

#objekt{
transform:rotate(30deg);
}
// Drehung um 30 Grad mit dem Uhrzeigersinn

#objekt{
transform:rotate(-30deg);
}
// Drehung um 30 Grad gegen den Uhrzeigersinn

Das hellgrüne Objekt stellt den Ausgangszustand dar. Die rotate Eigenschaft dreht das Element um die angegebene Gradzahl.

CSS transform-origin – Rotationspunkt der Drehung verschieben

CSS dreht die Objekte per Default um deren Mittelpunkt. Durch die CSS Eigenschaft transform-origin verschieben Sie diesen Drehpunkt. Dabei sind pixelgenaue Angaben und relative Angaben (top, bottom, left, center …) möglich.

#objekt{
transform-origin: top left;
}
// Rotationspunkt liegt oben links.

#objekt{
transform-origin:20px 40px;
}
// Rotationspunkt 20 nach rechts u. 40 nach unten

Durch eine Verschiebung des Mittelpunktes bekommen Sie größere Kontrolle über die resultierenden Dreheffekte.

CSS transform: scale – Größenverhältnisse ändern

Mit scale verändern Sie die Größenverhältnisse von HTML-Elementen. Aus einem Quadrat machen Sie durch scale(3,2) ein Rechteck mit den Seitenverhältnissen 3 zu 2.

#objekt{
transform: scale(x*Höhe,y*Breite);
}

#objekt{
transform: scale(3,2);
}
// 3 mal so breit u. doppelt so hoch
// wie das Ausgangsobjekt

Ein 100 mal 100 Pixel großes Quadrat verwandeln Sie durch
transform: scale(3,2);
in ein Rechteck mit 300 Pixel Breite und 200 Pixel Höhe.

Setzen Sie eine Zahl auf 1, um nur die Höhe bzw. nur die Breite zu verändern. Behalten Sie die Breite bei scale(1,Variable) oder fixieren Sie die Höhe scale(Variable,1), um die Breite (x-Achse) zu skalieren.

Statt scale(2,1) schreiben Sie scaleX(2), auch durch diese Anweisung verdoppeln Sie die Breite bei gleicher Höhe. Für eine Verdoppelung der Höhe bei gleicher Breite verwenden Sie scale(1,2) oder scaleY(2).

CSS transform: skew – Objekte scheren

Verändern Sie das Aussehen durch eine Scherung mit transform:skew. Scheren Sie Objekte entlang der x- bzw. y-Achse.  Bei einer Scherung bleibt der Flächeninhalt erhalten und die Punkte des Elements verschieben sich parallel zur Achse der Scherung.

<div id="objekt"></div>

transform: skew(x-Achse,y-Achse);
// Die Angaben erfolgen in Grad __deg.
// Positive Gradzahlen bedeuten eine Scherung
// im Uhrzeigersinn.

// CSS-Code:
#objekt{
transform:skew(30deg,0);
}

Auf der x-Achse erfolgt eine Scherung um 30 Grad, entlang y-Achse verändert sich nichts.

 

// CSS-Code:
#objekt{
transform:skew(0,30deg);
}

Auf der y-Achse erfolgt eine Scherung um 30 Grad, entlang der x-Achse verändert sich nichts.

 

// CSS-Code:
#objekt{
transform:skew(30deg,30deg);
}

Die Abbildung zeigt eine Scherung entlang beider Achsen im 30 Grad Winkel mit dem Uhrzeigersinn.

Für skew(30deg,0) gibt es die Kurzform skewX(30deg), während skewY(30deg) die verkürzte Schreibweise von skew(0,30deg) darstellt.

Verwandte Beiträge