CSS, HTML und Javascript mit {stil}

CSS transform • Rotieren, Skalieren, Verschieben

CSS Transform

CSS transform ändert die Position, Größe und Form von HTML-Elementen: Bewegen mit transform:translate(), Verkleinern oder Vergrößern mit transform:scale(), Rotieren mit transform:rotate() und Verzerren mit transform:matrix.

Die Kombination von CSS transform mit transition liefert Animationen und Effekte, die zuvor Javascript und Flash vorbehalten waren.

CSS transform ändert die Position, Größe und Form, bevor das Element im Browser gerendert wird. Die Änderungen an den Koordinaten beeinflußt den normalen Fluss der Elemente nicht. Das transformierte Element legt sich unter oder über den benachbarten Inhalt, wenn kein Raum freigeschlagen ist.

Die aktuellen Browser brauchen keinen Browser-Präfix mehr.

rotate, scale, skew

<img style="transform:rotate(60deg)" src="rect.png" width="200" height="132">
Ohne CSS transform Rotiert um 15° Rotiert um 30° Rotiert um 45° Rotiert um 60°

transform:rotate(xdeg) rotiert ein Element im Uhrzeigersinn um seinen Mittelpunkt.

<img style="left:100px;transform:scale(0.6)" src="rect.png"  alt="" width="200" height="132">
Ohne Skalieren mit CSS Bild mit CSS auf 80% verkleinert Bild mit CSS auf 40% verkleinert

transform:scale() vergrößert (Werte > 1) bzw. verkleinert ein Element (Werte < 1).

<img style="left:150px;transform:skew(12deg,12deg);"  … >
Keine Verzerrung (Skew) durch CSS Verzerrt (skew) um 6 Grad auf x und y-Achse Verzerrt (skew) um 12 Grad auf x und y-Achse

transform:skew(xdeg,ydeg) verzerrt ein Element in horizontaler / vertikaler Richtung um x / y Grad.

Bild mit CSS spiegeln

img.turnImg{
   transform: scaleX(-1);
}
Bild nicht gespiegelt
Bild mit CSS gespiegelt an der x-Acse

CSS transform-Syntax

Alle CSS-Transformationen folgen derselben einfachen Syntax. Zwischen der Transformation und den Werten in runden Klammern darf kein Leerzeichen stehen.

<style>
img#turn:hover{
    transform:perspective(500px) rotateY(75deg);
}
</style>

oder 

<img style="transform: perspective(500px) rotateY(75deg)" src="rect.png" …>
transform: translate(5px,5px);    // entlang der X- oder Y-Achse bewegen
transform: translateX(20px);      // entlang der X-Achse bewegen
transform: translateY(20px);       // entlang der X-Achse bewegen

transform: scale(0.5,0.5);         // vergrößern oder verkleinern
transform: scaleX(0.5);            // auf der X-Achse skalieren
transform: scaleY(2);              // auf der Y-Achse skalieren
transform: scaleZ(2);              // auf der Z-Achse skalieren
transform: scale3d(x,y,z);         // 3D-skalieren

transform: rotate(15deg);          // um 0 bis 360° rotieren 
transform: rotate3d(x,y,z,Winkel); // um 0 bis 360° rotieren 

transform: skew(-30deg,40deg);      // entlang x- und y-Achse
transform: skewX(-30deg);           // verzerren
transform: skewY(-30deg);           // verzerren
transform: matrix(n,n,n,n,n,n);    // 2D-Transformation mit 6 Werten
transform: matrix3d(n,…,n);        // 3D-Transformation mit 16 Werten

transform perspective(n)           // Perspektive einer 3D-Ansicht ändern

transform-origin: 50% 50%;         // Pivot-Punkt der Transformation ändern
transform-origin: bottom left;

Einfache Animation mit transform

Wenn das Element nicht von vornherein transformiert dargestellt werden soll, kann die Transformation z.B. durch Hovern mit der Maus ausgelöst werden. Eine schöne Animation ist das nicht. Der Effekt wirkt wie das Umlegen eines zickigen Schalters.

Animiert beim Hovern mit der Maus

Richtig in Gang kommen CSS-Transformationen erst in Zusammenarbeit mit CSS Transition.

CSS transition verändert CSS-Eigenschaften weich und fließend über einen Zeitraum und CSS-Keyframe-Animationen realisieren komplexe Abläufe mit weichen Übergängen.

.anime { animation: turner 4s infinite linear }

@keyframes turner{
    from{  transform: rotateY(0deg)   }
    to  {  transform: rotateY(360deg) }
}

CSS-Transformationen kombinieren

Ein Flip-Effekt braucht eine Perspektive, damit der Effekt räumlich wirkt. Darum sind es hier zwei Transformationen, nämlich perspective und rotate.

<img class="rotImg" style="left:250px;transform:perspective(500px) rotateY(180deg);" … >
Kein CSS Transform Perspektivisch verzerrt und rotiert um 50 Grad Perspektivisch verzerrt und rotiert um 75 Grad Perspektivisch verzerrt und rotiert um 130 Grad Perspektivisch verzerrt und rotiert um 105 Grad

Eine schöne Einführung in 3D-Transformationen mit CSS

Transformationen können also miteinander kombiniert werden. Die Eigenschaften werden nacheinander ohne Komma aufgeführt.

<img style="transform: perspective(200px) rotateY(50deg);" …>
Die Transformation dreht das Element um seine Y-Achse und verändert die 3D-Perspektive.

Den 3D-Effekt von transform:perspective erkennt man am besten in der Animation:

3D Transformation mit perspective
.looper { animation: perspect 4s infinite linear }
@keyframes perspect {
   0% {transform:perspective(300px) rotateY(0deg)}
   25% {transform:perspective(300px) rotateY(90deg)}
   50% {transform:perspective(300px) rotateY(180deg)}
   75% {transform:perspective(300px) rotateY(270deg)}
   100% {transform:perspective(300px) rotateY(360deg)}
}
<img class="looper"  src="eis.png"  alt="">

<img class="looper"  src="banner.png"  alt="…" width="200" height="132">

Der Wert von CSS perspective bestimmt die Stärke des 3D-Effekts und wirkt wie ein Teleobjektiv: Je größer die Brennweite – der Wert von perspective –, desto schwächer wird der perspektivische Effekt. Gehen wir mit einer kleinen Brennweite nah an das Motiv, wird der perspektivische Effekt immer stärker.

transform origin

Der Viewport einer HTML-Seite hat ein Koordinatensystem mit dem Ursprung oben links am Punkt (0,0).

Ein transformiertes Objekt hat sein eigenes lokales Koordinatensystem. Der Ursprung eines transformierten Elements ist sein Mittelpunkt.

transform-origin() verlagert den Ursprung der Transformation.

transform-origin: top left; oder 
transform-origin: 30px 70px;
transform origin legt den Drehpunkt fest

Text rotieren

Wenn wir einen Text mit CSS transform rotieren, ohne den Ursprung der Rotation zu verändern, verschiebt transform:rotate(90deg) den Text nach rechts, weil der Text um seine Mitte gedreht wird.

Einen Text rotieren
Einen Text rotieren
Einen Text rotieren
Einen Text rotieren

Meist wollen wir bei Text aber eine Rotation um die obere oder untere linke Ecke:

Einen Text rotieren
Einen Text rotieren
Einen Text rotieren
Einen Text rotieren
transform-origin: top left;transform:rotate(-90deg)

CSS transform matrix

Wenn eine Transformation aus mehreren Einzelschritten zusammen gesetzt ist, können die Einzelschritte in einer Transformationsmatrix zusammengefasst werden.

Jede Form ist durch die Koordinaten ihre Punkte definiert. Bei einer Transformation betrachtet man die Koordinaten vor der Transformation und die Koordinaten nach der Transformation. Die Erklärungen zu afinen Transformationen bei Wikipedia sind alles andere als intuitiv. Besser verständlich ist die Erklärung auf der Seite Grundlagen der Computergrafik / Homogene Koordinaten oder bei SVG 1.1 Coordinate Systems