CSS3 transform-origin Eigenschaft
Beispiel
Legen Sie die Position des Basispunkts des gedrehten Elements fest:
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari und Chrome */
}
Selbst ausprobieren »
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft unterstützt.
Die Zahl unmittelbar vor -webkit-, -ms- oder -moz- ist die erste Browserversion, die die mit Präfix versehene Eigenschaft unterstützt.
| Eigenschaft | |||||
|---|---|---|---|---|---|
| transform-origin (Zwei-Wert-Syntax) |
36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
23.0 15.0 -webkit- 10.5 -o- |
| transform-origin (Drei-Werte-Syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
Attributdefinition und Verwendungshinweise
Die Eigenschaft transform-origin ermöglicht es Ihnen, die Position transformierter Elemente zu ändern.
2D-transformierte Elemente können die X- und Y-Achse eines Elements ändern. 3D-transformierte Elemente können auch die Z-Achse eines Elements ändern.
Um die Eigenschaft transform-origin besser zu verstehen, sehen Sie sich diese.
Hinweis:Um dieses Attribut zu verwenden, müssen Sie zuerst dietransformEigenschaft verwenden.
Tipp:Safari/Chrome-Benutzer: Um3D-TransformationAttribute besser zu verstehen, sehen Sie sich bitte die.
| Standardwert: | 50% 50% 0 |
|---|---|
| Vererbt: | nein |
| Version: | CSS3 |
| JavaScript-Syntax: | object.style.transformOrigin="20% 40%" |
Syntax
| Wert | Beschreibung |
|---|---|
| x-Achse |
Definiert, wo die Ansicht auf der X-Achse platziert wird. Mögliche Werte:
|
| y-Achse |
Definiert, wo die Ansicht auf der Y-Achse platziert wird. Mögliche Werte:
|
| Z-Achse |
Definiert, wo die Ansicht auf der Z-Achse platziert wird. Mögliche Werte:
|