CSS
2D-Transformationen

Syntax

• Transformation drehen
• umwandeln: drehen (<Winkel>)
• Übersetzen Sie Transform
• transform: übersetzen (<Länge oder Prozentsatz> [, <Länge oder Prozentsatz>]?)
• transform: translateX (<länge oder prozentual>)
• transform: translateY (<länge oder prozentual>)
• Schiefe verwandeln
• Transformation: Schräglauf (<Winkel> [, <Winkel>]?)
• transform: skewX (<Winkel>)
• transform: skewY (<angle>)
• Scale Transform
• Transformation: Maßstab (<Skalierungsfaktor> [, <Skalierungsfaktor>]?)
• transform: scaleX (<Skalierungsfaktor>)
• transform: scaleY (<scale-factor>)
• Matrix-Transformation
• transform: matrix (<number> [, <number>] {5,5})

Parameter

Bemerkungen

-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);

Drehen

HTML

<div class="rotate"></div>

CSS

.rotate {
    width: 100px;
    height: 100px;
    background: teal;
    transform: rotate(45deg);
}

In diesem Beispiel wird das DIV um 45 Grad im Uhrzeigersinn gedreht. Das Rotationszentrum befindet sich in der Mitte des div, 50% von links und 50% von oben. Sie können den Drehpunkt ändern, indem Sie die Eigenschaft transform-origin festlegen.

transform-origin: 100% 50%;

Das obige Beispiel setzt den Drehpunkt auf die Mitte des rechten Endes.

Rahmen

HTML

<div class="scale"></div>

CSS

.scale {
    width: 100px;
    height: 100px;
    background: teal;
    transform: scale(0.5, 1.3);
}

In diesem Beispiel wird das div auf 100px * 0.5 = 50px auf der X-Achse und auf 100px * 1.3 = 130px auf der Y-Achse 100px * 1.3 = 130px .

Der Mittelpunkt der Transformation befindet sich in der Mitte des Bereichs, 50% von links und 50% von oben.

Übersetzen

HTML

<div class="translate"></div>

CSS

.translate {
    width: 100px;
    height: 100px;
    background: teal;
    transform: translate(200px, 50%);
}

In diesem Beispiel wird das div um 200px auf der X-Achse und um 100px * 50% = 50px auf der Y-Achse 100px * 50% = 50px .

Sie können auch Übersetzungen für eine einzelne Achse angeben.

Auf der X-Achse:

.translate {
    transform: translateX(200px);
}

Auf der Y-Achse:

.translate {
    transform: translateY(50%);
}

Neigung

HTML

<div class="skew"></div>

CSS

.skew {
    width: 100px;
    height: 100px;
    background: teal;
    transform: skew(20deg, -30deg);
}

In diesem Beispiel wird das div auf der X-Achse um 20 Grad und auf der Y-Achse um - 30 Grad verzerrt.
Der Mittelpunkt der Transformation befindet sich in der Mitte des Bereichs, 50% von links und 50% von oben.

Sehen Sie das Ergebnis hier .

Mehrere Transformationen

Mehrere Transformationen können wie folgt auf ein Element in einer Eigenschaft angewendet werden:

transform: rotate(15deg) translateX(200px);

Dadurch wird das Element um 15 Grad im Uhrzeigersinn gedreht und dann um 200 Pixel nach rechts verschoben.

Bei verketteten Transformationen bewegt sich das Koordinatensystem mit dem Element . Dies bedeutet, dass die Übersetzung nicht horizontal ist, sondern um eine Achse um 15 Grad im Uhrzeigersinn gedreht wird, wie in der folgenden Abbildung dargestellt:

Wenn Sie die Reihenfolge der Transformationen ändern, wird die Ausgabe geändert. Das erste Beispiel wird anders sein als

transform: translateX(200px) rotate(15deg);

<div class="transform"></div>

.transform {
  transform: rotate(15deg) translateX(200px);
}

Wie in diesem Bild gezeigt:

Ursprung umwandeln

Transformationen werden in Bezug auf einen Punkt durchgeführt, der durch die Eigenschaft transform-origin definiert wird.

Die Eigenschaft nimmt 2 Werte an: transform-origin: XY;

Im folgenden Beispiel wird das erste div ( .tl ) mit transform-origin: 0 0; um die obere linke Ecke gedreht transform-origin: 0 0; und das zweite ( .tr ) wird um seine obere rechte Ecke mit dem transform-origin: 100% 0 . Die Drehung wird beim Schwebeflug angewendet:

HTML:

<div class="transform originl"></div>
<div class="transform origin2"></div>

CSS:

.transform {
    display: inline-block;
    width: 200px;
    height: 100px;
    background: teal;
    transition: transform 1s;
}

.origin1 {
    transform-origin: 0 0;
}

.origin2 {
    transform-origin: 100% 0;
}

.transform:hover {
    transform: rotate(30deg);
}

Der Standardwert für die Eigenschaft transform-origin beträgt 50% 50% ist die Mitte des Elements.