CSS: Transform

Mittwoch 8. April 2020 von Torsten

In diesem Artikel wird die CSS Eigenschaft “Transform“ vorgestellt und einige Experimente damit durchgeführt…

Vorbereitungen für die Experimente:

Der erste Artikel auf der Webseite wird um folgenden HTML Quelltext ergänzt…:

<p>

<div id=“box1″>

</div>

</p>

Die CSS Anweisungen für diese erste Box werden in die artikel.css eingebaut:

#box1 {

width: 200px;

height: 100px;

border-style: solid;

border-color: black;

border-width: 1px;

transform: rotate(5deg);

}

Es gibt neben “rotate“ aber noch andere Methoden für die CSS Eigenschaft “transform“…Dazu erzeugen wir jetzt vier weitere Artikel mit vier weiteren Boxen.

Also “<div id=“box2“> bis “<div id=“box5“>“…

Transformationen ohne Ende:

Die CSS Anweisungen für diese Boxen werden in die artikel.css eingebaut und sehen so aus…:

#box2 {

width: 200px;

height: 100px;

border-style: solid;

border-color: black;

border-width: 1px;

transform: translate(50px, 100px);

}

#box3 {

width: 200px;

height: 100px;

border-style: solid;

border-color: black;

border-width: 1px;

transform: scale(2, 1);;

}

#box4 {

width: 200px;

height: 100px;

border-style: solid;

border-color: black;

border-width: 1px;

transform: skewX(20deg);

}

#box5 {

width: 200px;

height: 100px;

border-style: solid;

border-color: black;

border-width: 1px;

transform: matrix(1, 0, 0.5, 1, 150, 0);

}

Die rotate-Methode sollte klar sein, dass Objekt wird um einen bestimmten Winkel gedreht.

Die translate-Methode verschiebt das Objekt von der Ausgangsposition gerechnet.

Die scale-Methode ändert die Größe des Objektes.

Die skew-Methode verzerrt das Objektes.

Die matrix-Methode ist die Kombination aller vorherigen Methoden in einer einzigen Methode.

Die CSS Eigenschaft Transform lässt sich auch mit einem Hover-Effekt verbinden. Das Rezept dazu gibt es als Kommentar unter diesem Artikel…

Dieser Beitrag wurde erstellt am Mittwoch 8. April 2020 um 08:00 und abgelegt unter Allgemein. Kommentare zu diesen Eintrag im RSS 2.0 Feed. Sie können zum Ende springen und ein Kommentar hinterlassen. Pings sind im Augenblick nicht erlaubt.

Kommentar schreiben