English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS Referenzhandbuch

CSS @Regel(RULES)

CSS Eigenschaftsliste

CSS3 transform-Verwendung und Beispiel der Eigenschaft "origin"

transform-Die Eigenschaft "origin" ermöglicht es Ihnen, die Position des transformierenden Elements zu ändern.

2D-Umrechnungselement kann die X- und Y-Achse des Elements ändern. 3D-Umrechnungselement, kann auch die Z-Achse des Elements ändern.　

Die nachstehende Tabelle zeigt die Verwendung und Versionshistorie dieser Eigenschaft sowie die Syntax ihrer Verwendung in JavaScript-Skripten.

Standardwert:50% 50% 0
Geeignet für:verformbare Elemente
Vererbung:keine
Animierbar:ist.Bitte beziehen Sie sich auf Animationseigenschaft。
Version: CSS3neue Funktion
JavaScript-Syntax:object.style.transformOrigin="20@%"

transform-Syntax der Verwendung von origin

Die Syntax dieser Eigenschaft lautet wie folgt:

transform-origin: x-position | y-position | z-position | initial | inherit

Hinweis：Wenn nur "transform"-Die Eigenschaft "origin" bestimmt einen Wert, und es wird angenommen, dass der zweite Wert "center" ist, was ihm entspricht50% Werte verwendet.

Die folgenden Beispiele demonstrate, wie man transform-origin-Eigenschaft.

img　{
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-transform: rotate(30deg);
　　　　-webkit-transform-origin:　25% bottom;
　　　　/*　Firefox　*/
　　　　-moz-transform: rotate(30deg);
　　　　-moz-transform-origin:　25% bottom;
　　　　/*　IE　9　*/
　　　　-ms-transform: rotate(30deg);
　　　　-ms-transform-origin:　25% bottom;
　　　　
　　　　transform: rotate(30deg);
　　　　transform-origin:　25% bottom;
}
Testen Sie heraus‹/›

Hinweis：Wenn mindestens einer der beiden Werte kein Schlüsselwort ist, stellt der erste Wert die horizontale Position (oder Verschiebung) des Transformationsursprungs dar, der zweite Wert die vertikale Position (oder Verschiebung) des Transformationsursprungs.

Attribute-Werte

Die folgende Tabelle beschreibt die Werte dieses Attributes.

WertBeschreibung
x-position

stellt die horizontale Position (oder Verschiebung) des Transformationsursprungs dar. Es kann einen der folgenden Werte haben：

  • percentage -Definiert den Abstand relativ zur Breite des Elements.

  • length -Definiert den Abstand des verwendeten Längenwerts.

  • left -ist gleich 0％ oder Nullbreite.

  • center -ist gleich der Breite des Boxes.50％ oder die Hälfte.

  • right -ist gleich100％ oder die gesamte Breite des Boxes.

y-position

stellt die vertikale Position (oder Verschiebung) des Transformationsursprungs dar. Es kann einen der folgenden Werte haben：

  • percentage -Definiert den Abstand relativ zur Höhe des Elements.

  • length -Definiert den Abstand des verwendeten Längenwerts.

  • top -ist gleich 0％ oder Nullhöhe.

  • center -ist gleich der Höhe des Boxes.50％ oder die Hälfte.

  • bottom -ist gleich100％ oder die gesamte Höhe des Boxes.

z-positioneinlengthWert, der die Entfernung des Z = 0 Ursprungs Punkts (für3D-Transformation）。Prozentwerte sind ungültig.
initialSetzen Sie diesen Wert auf seinen Standardwert.
inheritWenn angegeben, verwendet der verknüpfte Element sein Elternelementtransform.-Werte der origin-Eigenschaft.

Browserkompatibilität

transform-Kompatibilität der origin-Eigenschaft der Browser, die Zahlen in der folgenden Tabelle stellen die niedrigste Versionsnummer dar, die den Browser unterstützt, der diese Eigenschaft unterstützt; alle gängigen Browser unterstützen diese Eigenschaft.

  • Firefox （2D）3.5 +，（3D）10+ -moz-，16 +

  • Chrome （2D）4 +，（3D）12+ -webkit-，36 +

  • Internet Explorer （2D）9 -ms-，10+

  • Apple Safari （2D）3.2 +，（3D）4+ -webkit-

  • Opera （2D）10.5+ -o 　 -，
    （2D）（3D）15+ 　 -webkit-，23+

Weitere Lektüre

Bitte beziehen Sie sich auf die folgenden Anleitungen：CSS3 2D-Transformation，CSS3 3D-Transformation

Zusammenhängende Eigenschaften：backface-visibility，perspective，perspective-origin，transform，transform-style。

CSS3 transform-style EigenschaftCSS3 transform Eigenschaft