CSS3-Transformation-origin Eigenschaft
Beispiele
Sollposition Drehelemente:
{
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 and Chrome */
}
Versuchen »
Browser-Unterstützung
Die Zahlen in der Tabelle stellen die erste Browser die Versionsnummer der Immobilie zu unterstützen.
Unmittelbar im Anschluss an die digitale -webkit-, -MS- oder vor zur Unterstützung der Präfix Attributnummer erste Browser-Version -moz-.
| 属性 | |||||
|---|---|---|---|---|---|
| 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- |
Attributdefinitionen und Anweisungen
Transform-Origin-Attribut können Sie die Position des Konversionselements zu ändern.
2D-Wandlerelemente können Elemente X und Y-Achse ändern. 3D-Umwandlungselement, können Sie auch das Element Z-Achse zu ändern.
Zum besseren Verständnis der Transform -Origin - Attribut finden Sie in der Demo .
Hinweis: Diese Eigenschaft muss zuerst verwandeln Eigenschaft.
Tipp: Safari / Chrome - Nutzer: Um besser zu verstehen , die 3D - Eigenschaften verwandeln, finden Sie in der Demo .
| Standard: | 50% 50% 0 |
|---|---|
| Vererbung: | keine |
| Version: | CSS3 |
| JavaScript-Syntax: | Objekt .style.transformOrigin = "20% 40%" |
Grammatik
| Wert | Beschreibung |
|---|---|
| x-Achse | Benutzerdefinierte Ansicht ist, wo der X-Achse angeordnet. Mögliche Werte:
|
| y-Achse | Benutzerdefinierte Ansicht ist, wo die Y-Achse angeordnet. Mögliche Werte:
|
| z-Achse | Benutzerdefinierte Ansicht ist, wo die Z-Achse angeordnet. Mögliche Werte:
|