Skip to content

V3_Transform

Jump to bottom
hzuellig edited this page Mar 2, 2026 · 2 revisions

CSS Transform

Der CSS-Datentyp <transform-function> stellt eine Transformation dar, die das Aussehen eines Elements beeinflusst. Transformationsfunktionen können ein Element im 2D- oder 3D-Raum drehen, in der Größe verändern, verzerren oder verschieben. Er wird in der Eigenschaft transform verwendet.

  /* Beispiel Verschiebung um 100px in der x-Achse und 200px in der y-Achse */
  transform: translate(100px, 200px);

Wir werden nun die 2D Transformationen einzeln anschauen. Erstelle einen Folder tag3 und darin ueb1-transform.html Mach ein Beispiel pro Transformation. Dazu kannst du pro Beispiel jeweils diese Grundstruktur übernehmen. Wir benutzen CSS Grid, um jeweils das transformierte und das nicht transformierte Element (allenfalls überlagert) anzuzeigen.

    <section>
        <h1>Name der Transformation</h1>
        <div class="group">
            <div class="not_transformed">
            </div>
            <div class="transformed">
            </div>
        </div>
    </section>
.group{
    display:grid;
    grid-template-columns: 1fr; 
    grid-template-rows: 1fr; 
}

/* beide elemente liegen ursprünglich übereinander */
.not_transformed,
.transformed {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    height: 400px;
    width: 400px;
}
/* zur visuellen unterscheidung zwei unterschiedliche stile zuweisen */
        
.not_transformed {
    background-color: black;
}
.transformed {
    background-color: rgba(0, 0, 255, 0.5);
}

translate()

Die CSS-Funktion translate() positioniert ein Element in horizontaler und/oder vertikaler Richtung neu.

/* Ein einziger <length-percentage> Wert gilt für die x-Achse
*/
transform: translate(200px);
transform: translate(50%);

/* Zwei <length-percentage> Werte gelten separat für die x (1.Wert) und y (2. Wert) Achse
*/
  
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);

In der Anwendung unseres Beispiels:

/* neue Klasse */
.verschoben {
    transform: translate(100px, 200px);
}
<div class="transformed verschoben">
 </div>

rotate()

Die CSS-Funktion rotate() definiert eine Transformation, die ein Element um einen festen Punkt auf der 2D-Ebene dreht, ohne es zu deformieren.

/* Beispiel 45 Grad Uhrzeigersinn*/
transform: rotate(45deg);

transform-origin

Der Fixpunkt, um den das Element rotiert - wie oben erwähnt - wird auch als Transformationsursprung bezeichnet. Standardmäßig ist dies der Mittelpunkt des Elements, aber du kannst deinen eigenen Rotationsursprung mit der Eigenschaft transform-origin festlegen.

/* Beispiel linke obere Ecke*/
transform-origin: top left;
/* Beispiel 50px Distanz nach rechts und nach unten */
transform-origin: 50px 50px;

Probiere beides, einmal ohne Setzung von transform-origin, einmal mit.

scale()

Die CSS-Funktion scale() definiert eine Transformation, die ein Element auf der 2D-Ebene skaliert.

  /*Beispiel beide Achsen gleich skaliert*/
  transform:scale(0.8); 
  /*Beispiel beide Achsen unterschiedlich skaliert*/
  transform:scale(0.8, 2);


Schreibe ein Wort in die transformierte Box und beachte, wie die Funktion alle Properties skaliert, auch die Schrift (auch allfällige Kinder).

skew()

Diese Transformation ist eine Verzerrung, die jeden Punkt innerhalb eines Elements um einen bestimmten Winkel in horizontaler und vertikaler Richtung verzerrt. Der Effekt ist so, als ob du jede Ecke des Elements anfassen und sie entlang eines bestimmten Winkels ziehen würdest. skewX in der x-Richtung, skewY in der y-Richtung, skew in beiden Richtungen. Die Angaben erfolgen in Grad (10deg).

 transform:skewX(10deg); 
 transform:skew(20deg, 10deg);

Kombination von mehreren Transformationen auf einem Element

Die Kombination von verschiedenen transformationen schreibt ihr hintereinander in einen einzige transform Angabe. Bei der falschen Schreibweise oben würde bloss rotate ausgeführt, weil die Angabe scale überschreibt – sie kommt nachher (Cascading Rules).

/* Falsch !!*/
  transform:scale(0.8); 
  transform:rotate(45deg);
/* Richtig !!*/
  transform:scale(0.8) rotate(45deg);

3D Transformationen

Tutorial: https://3dtransforms.desandro.com/

Alle im Überblick: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Übung

  1. Zur Repetition: Arbeitet euch durch die 4 Übungen hier https://www.w3schools.com/css/exercise.asp?filename=exercise_css3_2dtransforms1

  2. Setze mal die drei S auf diesem Plakat, indem du zuerst alle an dieselbe Position bringst (wie oben) und dann zwei davon verschiebst. Den Effekt der Farbmischungen bekommst du übrigens über mix-blend-mode, https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode


Anfang: alle drei S in einem Grid exakt übereinander platzieren. Todo: Probiere sie, mit Transformationen unterschiedlich zu verschieben.

<div class="group">
            <div class="child  ">
                S
            </div>
            <div class="child ">
                S
            </div>
            <div class="child ">
                S
            </div>
</div>
.group {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr;
            align-self: center;
        }
 .child {
            grid-column: 1 / 2;
            grid-row: 1 / 2;
            mix-blend-mode: multiply;
        }

Clone this wiki locally