Beispiel
Richten Sie eine Basis Platzierung des gedrehten Element:
div
{
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin: 20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
transform: rotate(45deg);
transform-origin: 20% 40%;
}
Versuch es selber " Definition und Verwendung
Die Transformation-origin Eigenschaft können Sie die Position von transformierten Elemente zu ändern.
2D Transformationen können die x- und y-Achse eines Elements ändern. 3D-Transformationen können auch die z-Achse eines Elements ändern.
Zum besseren Verständnis der transformations Herkunft Eigenschaft, sehen eine Demo .
Note: Diese Eigenschaft muss zusammen mit dem verwendet werden , verwandeln Eigenschaft.
Tip: Um besser zu verstehen diese Eigenschaft für 3D - Transformationen, sehen eine Demo .
| Standardwert: | 50% 50% 0 |
|---|---|
| Vererbt: | no |
| Anima: | yes. Read about animatable Try it |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.transformOrigin="0 0" Try it |
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen, gefolgt von -webkit-, -moz- oder -o- die erste Version an, die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| transform-origin (two-value 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 (three-value syntax) | 36.0 12.0 -webkit- | 10.0 | 16.0 10,0 -moz- | 9.0 4.0 -webkit- | 23.0 15,0 -webkit- |
CSS-Syntax
transform-origin:x-axis y-axis z-axis|initial|inherit;Eigenschaftswerte
| Eigentumswert | Beschreibung |
|---|---|
| x-axis | Definiert, wo die Sicht auf der x-Achse platziert ist. Mögliche Werte:
|
| y-axis | Definiert, wo die Sicht auf der y-Achse angeordnet ist. Mögliche Werte:
|
| z-axis | Definiert , wo die Sicht auf der z-Achse angeordnet ist (for 3D transformations) - (for 3D transformations) . Mögliche Werte:
|
| Initiale | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfangs |
| erben | Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über erben |
Verwandte Seiten
CSS Tutorial: CSS 2D - Transformationen
CSS Tutorial: CSS 3D Transforms
HTML - DOM - Referenz: transformOrigin property