From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/transform-origin/index.html | 692 +++++++++++++++++++++++++++ 1 file changed, 692 insertions(+) create mode 100644 files/de/web/css/transform-origin/index.html (limited to 'files/de/web/css/transform-origin/index.html') diff --git a/files/de/web/css/transform-origin/index.html b/files/de/web/css/transform-origin/index.html new file mode 100644 index 0000000000..83f8a833ed --- /dev/null +++ b/files/de/web/css/transform-origin/index.html @@ -0,0 +1,692 @@ +--- +title: transform-origin +slug: Web/CSS/transform-origin +tags: + - CSS + - CSS Transformationen + - CSS3 + - Fortgeschritten +translation_of: Web/CSS/transform-origin +--- +
{{ CSSRef("CSS Transforms") }}
+ +

Die CSS-Eigenschaft transform-origin legt den Ankerpunkt für die Transformationen eines Elements fest.

+ +
/* One-value syntax */
+transform-origin: 2px;
+transform-origin: bottom;
+
+/* x-offset y-offset */
+transform-origin: 3cm 2px;
+
+/* x-offset-keyword y-offset */
+transform-origin: left 2px;
+
+/* x-offset-keyword y-offset-keyword */
+transform-origin: right top;
+
+/* y-offset-keyword x-offset-keyword */
+transform-origin: top right;
+
+/* x-offset y-offset z-offset */
+transform-origin: 2px 30% 10px;
+
+/* x-offset-keyword y-offset z-offset */
+transform-origin: left 5px -3px;
+
+/* x-offset-keyword y-offset-keyword z-offset */
+transform-origin: right bottom 2cm;
+
+/* y-offset-keyword x-offset-keyword z-offset */
+transform-origin: bottom right 2cm;
+
+/* Global values */
+transform-origin: inherit;
+transform-origin: initial;
+transform-origin: unset;
+
+ + + +

{{EmbedLiveSample("transform-origin", "100%", 250, "", "", "example-outcome-frame")}}

+ +

Der Ankerpunkt ist somit der Punkt, um den eine Transformation angewendet wird. Zum Beispiel ist der Ankerpunkt der Funktion rotate() der Rotationsmittelpunkt. (Diese Eigenschaft wird angewendet, indem zuerst das Element durch den negierten Wert der Eigenschaft verschoben wird, dann die Transformation des Elements angewendet wird und dann um den Eigenschaftswert zurück verschoben wird.)
+
+ Werte, die nicht explizit definiert sind, werden auf die entsprechenden Standardwerte zurückgesetzt.

+ +

{{Cssinfo}}

+ +

Syntax

+ +

Die Eigenschaft transform-origin kann mit einem, zwei oder drei Werten angegeben werden.

+ + + +

Werte

+ +
+
x-offset
+
Ist als {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} angegebener Versatz auf der X-Achse von der oberden linken Ecke.
+
offset-keyword
+
Die Schlüsselwörter left, right, top, bottom, und center beschreiben entsprechende Werte.
+
y-offset
+
Ist als {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} angegebener Versatz auf der Y-Achse von der oberden linken Ecke.
+
x-offset-keyword
+
Die Schlüsselwörter left, right, oder center beschreiben entsprechende Werte für die horizontale Transformation.
+
y-offset-keyword
+
Die Schlüsselwörter top, bottom, oder center beschreiben entsprechende Werte für die vertikale Transformation.
+
z-offset
+
Als {{cssxref("<length>")}} (und nicht als {{cssxref("<percentage>")}}) beschreibt den Versatz auf der Z-Achse relativ zu 0.
+
+ +

Die Schlüsselwörte entschprechen folgenden Angaben in {{cssxref("<percentage>")}}:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SchlüsselwortWert
left0%
center50%
right100%
top0%
bottom100%
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
QuellcodeAusgabe
+

transform: none;

+ 		+ + +

{{EmbedLiveSample('transform_none', '', '', '', '', 'no-button') }}

+
+

transform: rotate(30deg);

+ 		+ + +

{{EmbedLiveSample('transform_rotate_only', '', '', '', '', 'no-button') }}

+
+

transform: rotate(30deg);
+ transform-origin: 0 0;

+ 		+ + +

{{EmbedLiveSample('transform_rotate', '', '', '', '', 'no-button') }}

+
+

transform: rotate(30deg);
+ transform-origin: 100% 100%;

+ 		+ + +

{{EmbedLiveSample('transform_rotate_with_percentage', '', '', '', '', 'no-button') }}

+
+

transform: rotate(30deg);
+ transform-origin: -1em -3em;

+ 		+ + +

{{EmbedLiveSample('transform_rotate_with_em', '', '', '', '', 'no-button') }}

+
+

transform: scale(1.9);

+ 		+ + +

{{EmbedLiveSample('transform_scale_only', '', '', '', '', 'no-button') }}

+
+

transform: scale(1.9);
+ transform-origin: 0 0;

+ 		+ + +

{{EmbedLiveSample('transform_scale_without_origin', '', '', '', '', 'no-button') }}

+
+

transform: scale(1.9);
+ transform-origin: 100% -30%;

+ 		+ + +

{{EmbedLiveSample('transform_scale', '', '', '', '', 'no-button') }}

+
+

transform: skewX(50deg);
+ transform-origin: 100% -30%;

+ 		+ + +

{{EmbedLiveSample('transform_skew_x', '', '', '', '', 'no-button') }}

+
+

transform: skewY(50deg);
+ transform-origin: 100% -30%;

+ 		+ + +

{{EmbedLiveSample('transform_skew_y', '', '', '', '', 'no-button') }}

+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusNotiz
{{ SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin') }}{{ Spec2('CSS3 Transforms') }} 
+ +

Browserunterstützung

+ + + +

{{Compat("css.properties.transform-origin")}}

+ +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf