Eigenschaft transform-origin
Die Eigenschaft transform-origin legt den Punkt fest,
relativ zu dem die Transformationen des Elements stattfinden,
die durch die Eigenschaft transform definiert werden.
Standardmäßig ist dieser Punkt die Mitte des Elements,
und beispielsweise erfolgt eine Drehung relativ
zu seiner Mitte. Dieses Verhalten kann jedoch geändert werden,
um das Element dazu zu bringen, sich relativ zu seiner
Seite, Ecke oder sogar relativ zu einem Punkt außerhalb
des Elements zu drehen.
Syntax
Selektor {
transform-origin: X-Achse Y-Achse Z-Achse;
}
Die Werte für die Y- und Z-Achse sind nicht obligatorisch, sie können weggelassen werden (sie nehmen dann die Standardwerte an). Die Verschiebung des Punkts entlang der Z-Achse wird für 3D-Transformationen benötigt.
Werte für die X-Achse
| Wert | Beschreibung |
|---|---|
| CSS-Einheiten | Als Wert dienen alle Einheiten für Größen, die den Versatz des Transformationszentrums vom linken Rand des Elements angeben. Ein positiver Wert verschiebt das Transformationszentrum nach rechts (in das Element hinein), ein negativer Wert nach links (aus dem Element heraus) relativ zum linken Rand des Elements. |
left |
Der Drehpunkt horizontal am linken Rand des Elements. |
right |
Der Drehpunkt horizontal am rechten Rand des Elements. |
center |
Der Drehpunkt horizontal in der Mitte des Elements. |
Standardwert: center.
Werte für die Y-Achse
| Wert | Beschreibung |
|---|---|
| CSS-Einheiten | Als Wert dienen alle Einheiten für Größen, die den Versatz des Transformationszentrums vom oberen Rand des Elements angeben. Ein positiver Wert verschiebt das Transformationszentrum nach unten (in das Element hinein), ein negativer Wert nach oben (aus dem Element heraus) relativ zum oberen Rand des Elements. |
top |
Der Drehpunkt vertikal am oberen Rand des Elements. |
bottom |
Der Drehpunkt vertikal am unteren Rand des Elements. |
center |
Der Drehpunkt vertikal in der Mitte des Elements. |
Standardwert: center.
Werte für die Z-Achse
| Wert | Beschreibung |
|---|---|
| CSS-Einheiten | Als Wert dienen alle Einheiten für Größen, die den Versatz des Transformationszentrums von der Ebene des Elements angeben. Ein positiver Wert verschiebt es zu uns hin (von der Bildebene weg), ein negativer Wert von uns weg. |
Standardwert: 0px.
Beispiel
Derzeit ist der Wert der Eigenschaft transform-origin nicht gesetzt und der Block dreht sich relativ zu seiner Mitte. Bewegen Sie die Maus über den Block, um den Effekt zu sehen:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Beispiel
Jetzt dreht sich der Block bei Mouseover relativ zur oberen linken Ecke:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Beispiel
Jetzt dreht sich der Block bei Mouseover relativ
zur unteren rechten Ecke. Dazu muss der
Transformationspunkt um 100% nach rechts
und um 100% nach unten verschoben werden
(man könnte auch px angeben, aber bei Änderung der Elementgröße
würde der Transformationspunkt an seiner Position bleiben,
daher ist % besser):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Beispiel
Drehen des Blocks relativ zur oberen rechten Ecke:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Beispiel
Drehen des Blocks relativ zur Mitte der linken Seite.
Dazu setzen wir für die X-Achse left (der Drehpunkt
ist links), und für die Y-Achse center
(der Drehpunkt ist vertikal in der Mitte):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Beispiel
Die Eigenschaft kann nicht nur für Drehungen,
sondern auch für andere Transformationen verwendet werden.
Vergrößern wir die Skalierung mit
scale und setzen den Transformationspunkt
auf die linke untere Ecke:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left bottom;
transform: scale(1.5);
}
:
Beispiel
Jetzt setzen wir den Transformationspunkt auf die obere rechte Ecke:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: right top;
transform: scale(1.5);
}
:
Beispiel
Der Transformationspunkt kann auch außerhalb des Elements liegen. Im folgenden Beispiel führt das Bewegen der Maus über den roten Block dazu, dass der schwarze Block eine Drehung relativ zu einem Punkt außerhalb ausführt:
<div id="hover"></div>
<div id="elem"></div>
#hover {
border: 1px solid red;
width: 50px;
height: 50px;
}
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
transition: transform 1s;
transform-origin: -100px -100px;
}
#hover:hover + #elem {
transform: rotate(30deg);
}
:
