Suche…


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

Funktion / Parameter Einzelheiten
rotate(x) Definiert eine Transformation, mit der das Element um einen festen Punkt auf der Z-Achse verschoben wird
translate(x,y) Verschiebt die Position des Elements auf der X- und Y-Achse
translateX(x) Verschiebt die Position des Elements auf der X-Achse
translateY(y) Verschiebt die Position des Elements auf der Y-Achse
scale(x,y) Ändert die Größe des Elements auf der X- und Y-Achse
scaleX(x) Ändert die Größe des Elements auf der X-Achse
scaleY(y) Ändert die Größe des Elements auf der Y-Achse
skew(x,y) Scherabbildung oder Transvektion, die jeden Punkt eines Elements um einen bestimmten Winkel in jede Richtung verzerrt
skewX(x) Horizontale Scherabbildung, die jeden Punkt eines Elements um einen bestimmten Winkel in horizontaler Richtung verzerrt
skewY(y) Vertikale Scherabbildung, die jeden Punkt eines Elements um einen bestimmten Winkel in vertikaler Richtung verzerrt
matrix() Definiert eine 2D-Transformation in Form einer Transformationsmatrix.
Winkel Der Winkel, um den das Element gedreht oder geneigt werden soll (abhängig von der Funktion, mit der es verwendet wird). Der Winkel kann in Grad ( deg ), Gradian ( grad ), Radiant ( rad ) oder turn ( turn ) angegeben werden. In der Funktion skew() ist der zweite Winkel optional. Wenn nicht angegeben, gibt es keine (0) Schräglage in der Y-Achse.
Länge oder Prozentsatz Die als Länge oder Prozentsatz ausgedrückte Entfernung, um die das Element übersetzt werden soll. In der Funktion translate() ist der zweite Längen- oder Prozentsatz optional. Wenn nicht angegeben, gibt es keine 0-Verschiebung in der Y-Achse.
Skalierungsfaktor Eine Zahl, die definiert, wie oft das Element in der angegebenen Achse skaliert werden soll. Bei der Funktion scale() ist der zweite Skalierungsfaktor optional. Wenn nicht angegeben, wird der erste Skalierungsfaktor auch für die Y-Achse angewendet.

Bemerkungen

2D-Koordinatensystem

Transformationen werden nach einem 2D-X / Y-Koordinatensystem durchgeführt. Die X-Achse geht von rechts nach links und die Y-Achse geht nach unten, wie in der folgenden Abbildung dargestellt:

2D-CSS-Koordinatensystem

Ein positives translateY() geht also nach unten und ein positives translateX() geht richtig.

Browserunterstützung und Präfixe

  • IE unterstützt diese Eigenschaft seit IE9 mit dem Präfix -ms- . Ältere Versionen und Edge benötigen das Präfix nicht
  • Firefox unterstützt es seit Version 3.5 und benötigt bis Version 15 das Präfix -moz-
  • Chrome seit Version 4 und bis Version 34 benötigt das Präfix -webkit-
  • Safari benötigt das Präfix -webkit- bis Version 8
  • Opera benötigt das Präfix -o- für Version 11.5 und das Präfix -webkit- von Version 15 bis 22
  • Android benötigt das Präfix -webkit- von Version 2.1 bis 4.4.4

Beispiel für eine vorangestellte Transformation:

-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:

Mehrere Transformationen werden gedreht und dann übersetzt

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:

Mehrere Transformationen werden dann gedreht

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.



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow