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…