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

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);
}

Infografik CSS transform:translate
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

Infografik CSS transform:rotate
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

Infografik CSS transform_origin
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.

Infografik CSS transform:scale

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);
}

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

 

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

Infografik CSS transform:skew_2
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);
}

Infografik CSS transform:skew_3
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

CSS3 Animationen: transition erklärt

Animationen bringen Bewegung auf die Seite und sorgen für das gewisse Etwas, um sich sich von der Konkurrenz abzuheben. Wählen Sie dezente Effekte und reduzieren Sie die Animationen auf wenige

HTML Tipps: Elemente zur Textformatierung

Die HTML-Elemente mit denen Textabschnitte kursiv oder fett ausgezeichnet werden können sind allgemein bekannt. Es gibt jedoch auch einige weniger bekannte Elemente mit denen Textelemente formatiert werden können. Inhalt HTML

HTML- Block und Inline-Elemente

Es gibt in HTML zwei grundsätzliche Arten von Elementen: Block und Inline-Elemente. Beide Arten von Elementen haben unterschiedliche Eigenschaften. Die Kenntnis dieser Eigenschaften ist die Grundlage für einen korrekten HTML-Code

HTML Tipps für besseren Quellcode

Der HTML-Quellcode einer Internetseite sollte übersichtlich, möglichst schmal und selbsterklärend sein. Ein übersichtlicher Quellcode kann leichter und vor allem schneller verändert werden. Je schmaler der Quellcode ist, umso geringer ist

Kontaktdaten auf der Homepage mit HTML

Auf jeder gewerblichen Webseite befinden sich die Adressdaten der Firma, zu der die Webseite gehört. Die Daten können auf verschiedene Weise durch HTML-Code dargestellt werden. Im folgenden Artikel wird kurz