From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- .../transform-function/translate3d()/index.html | 145 -------------------- .../css/transform-function/translate3d/index.html | 146 +++++++++++++++++++++ .../css/transform-function/translatey()/index.html | 121 ----------------- .../css/transform-function/translatey/index.html | 122 +++++++++++++++++ .../css/transform-function/translatez()/index.html | 126 ------------------ .../css/transform-function/translatez/index.html | 127 ++++++++++++++++++ 6 files changed, 395 insertions(+), 392 deletions(-) delete mode 100644 files/de/web/css/transform-function/translate3d()/index.html create mode 100644 files/de/web/css/transform-function/translate3d/index.html delete mode 100644 files/de/web/css/transform-function/translatey()/index.html create mode 100644 files/de/web/css/transform-function/translatey/index.html delete mode 100644 files/de/web/css/transform-function/translatez()/index.html create mode 100644 files/de/web/css/transform-function/translatez/index.html (limited to 'files/de/web/css/transform-function') diff --git a/files/de/web/css/transform-function/translate3d()/index.html b/files/de/web/css/transform-function/translate3d()/index.html deleted file mode 100644 index 4798b754a8..0000000000 --- a/files/de/web/css/transform-function/translate3d()/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: translate3d() -slug: Web/CSS/transform-function/translate3d() -tags: - - CSS - - CSS Funktion - - CSS Transformation - - Funktion - - Referenz -translation_of: Web/CSS/transform-function/translate3d() ---- -
{{CSSRef}}
- -

Die CSS-Eigenschaften translate3d() positioniert ein Element im 3D-Raum neu. Sein Ergebnis ist ein {{cssxref("<Transform-Funktion>")}} Datentyp.

- -
{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}
- - - -

Diese Transformation wird durch einen dreidimensionalen Vektor charakterisiert. Seine Koordinaten legen fest, wie sehr sich das Element in jede Richtung bewegt.

- -

Syntax

- -
translate3d(tx, ty, tz)
-
- -

Werte

- -
-
tx
-
Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Abszisse des Verschiebungsvektors darstellt.
-
ty
-
Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Ordinate des Verschiebevektors darstellt.
-
tz
-
Ist ein {{cssxref("<Länge>")}}, der die z-Komponente des Verschiebungsvektors darstellt.
- Es kann kein {{cssxref("<Prozentwert>")}}-Wert sein; in diesem Fall wird die Eigenschaft, die die Transformation enthält, als ungültig betrachtet.
-
- - - - - - - - - - - - - - - - - -
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
-

Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.

- 		Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden. 100tx010ty001tz0001
- -

Beispiele

- -

Verwendung einer einachsigen Verschiebung

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  /* Equivalent to perspective(500px) translateX(10px) */
-  transform: perspective(500px) translate3d(10px, 0, 0px);
-  background-color: pink;
-}
-
- -

Ergebnis

- -

{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}}

- -

Kombinierte Z-Achsen- und X-Achsen-Verschiebung

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: perspective(500px) translate3d(10px, 0, 100px);
-  background-color: pink;
-}
-
- -

Ergebnis

- -

{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}}

- -

Spezifikation

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}{{Spec2("CSS Transforms 2")}}Ursprüngliche Definition
- -

Browser-Kompatibilität

- -

{{Compat("css.types.transform-function")}}

- -

Siehe auch

- - diff --git a/files/de/web/css/transform-function/translate3d/index.html b/files/de/web/css/transform-function/translate3d/index.html new file mode 100644 index 0000000000..8e232a1f6f --- /dev/null +++ b/files/de/web/css/transform-function/translate3d/index.html @@ -0,0 +1,146 @@ +--- +title: translate3d() +slug: Web/CSS/transform-function/translate3d +tags: + - CSS + - CSS Funktion + - CSS Transformation + - Funktion + - Referenz +translation_of: Web/CSS/transform-function/translate3d() +original_slug: Web/CSS/transform-function/translate3d() +--- +
{{CSSRef}}
+ +

Die CSS-Eigenschaften translate3d() positioniert ein Element im 3D-Raum neu. Sein Ergebnis ist ein {{cssxref("<Transform-Funktion>")}} Datentyp.

+ +
{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}
+ + + +

Diese Transformation wird durch einen dreidimensionalen Vektor charakterisiert. Seine Koordinaten legen fest, wie sehr sich das Element in jede Richtung bewegt.

+ +

Syntax

+ +
translate3d(tx, ty, tz)
+
+ +

Werte

+ +
+
tx
+
Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Abszisse des Verschiebungsvektors darstellt.
+
ty
+
Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Ordinate des Verschiebevektors darstellt.
+
tz
+
Ist ein {{cssxref("<Länge>")}}, der die z-Komponente des Verschiebungsvektors darstellt.
+ Es kann kein {{cssxref("<Prozentwert>")}}-Wert sein; in diesem Fall wird die Eigenschaft, die die Transformation enthält, als ungültig betrachtet.
+
+ + + + + + + + + + + + + + + + + +
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
+

Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.

+ 		Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden. 100tx010ty001tz0001
+ +

Beispiele

+ +

Verwendung einer einachsigen Verschiebung

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  /* Equivalent to perspective(500px) translateX(10px) */
+  transform: perspective(500px) translate3d(10px, 0, 0px);
+  background-color: pink;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}}

+ +

Kombinierte Z-Achsen- und X-Achsen-Verschiebung

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: perspective(500px) translate3d(10px, 0, 100px);
+  background-color: pink;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}}

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}{{Spec2("CSS Transforms 2")}}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ +

{{Compat("css.types.transform-function")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/transform-function/translatey()/index.html b/files/de/web/css/transform-function/translatey()/index.html deleted file mode 100644 index 83a980b3d0..0000000000 --- a/files/de/web/css/transform-function/translatey()/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: translateY() -slug: Web/CSS/transform-function/translateY() -tags: - - CSS - - CSS Funktion - - CSS Transfomation - - Funktion - - Referenz -translation_of: Web/CSS/transform-function/translateY() ---- -
{{CSSRef}}
- -

Die CSS-Funktion translateY() positioniert ein Element horizontal auf der 2D-Ebene neu. Ihr Ergebnis ist ein {{cssxref("<transform-function>")}} Datentyp.

- -

- -
-

Hinweis: translateY(ty) ist dasselbe wie translate(0, ty) oder translate3d(0, ty, 0).

-
- -

Syntax

- -
/* <length-percentage> values */
-transform: translateY(200px);
-transform: translateY(50%);
-
- -

Werte

- -
-
<length-percentage>
-
Ist ein {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} , der die Abszisse des Verschiebevektors darstellt. Ein Prozentwert bezieht sich auf die Breite der Referenzbox, die durch die Eigenschaft {{cssxref("transform-box")}} definiert ist.
-
- - - - - - - - - - - - - - - - - - - - - -
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
-

Eine Translation ist keine lineare Transformation in ℝ2 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.

- 		10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]
- -

Formale Syntax

- -
translateY({{cssxref("<length-percentage>")}})
-
- -

Beispiel

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translateY(10px);
-  background-color: pink;
-}
-
- -

Ergebnis

- -

{{EmbedLiveSample("Examples", 250, 250)}}

- -

Spezifikation

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}{{Spec2("CSS3 Transforms")}}Ursprüngliche Definition
- -

Browser-Kompatibilität

- -

{{Compat("css.types.transform-function")}}

- -

See also

- - diff --git a/files/de/web/css/transform-function/translatey/index.html b/files/de/web/css/transform-function/translatey/index.html new file mode 100644 index 0000000000..099f7d2202 --- /dev/null +++ b/files/de/web/css/transform-function/translatey/index.html @@ -0,0 +1,122 @@ +--- +title: translateY() +slug: Web/CSS/transform-function/translateY +tags: + - CSS + - CSS Funktion + - CSS Transfomation + - Funktion + - Referenz +translation_of: Web/CSS/transform-function/translateY() +original_slug: Web/CSS/transform-function/translateY() +--- +
{{CSSRef}}
+ +

Die CSS-Funktion translateY() positioniert ein Element horizontal auf der 2D-Ebene neu. Ihr Ergebnis ist ein {{cssxref("<transform-function>")}} Datentyp.

+ +

+ +
+

Hinweis: translateY(ty) ist dasselbe wie translate(0, ty) oder translate3d(0, ty, 0).

+
+ +

Syntax

+ +
/* <length-percentage> values */
+transform: translateY(200px);
+transform: translateY(50%);
+
+ +

Werte

+ +
+
<length-percentage>
+
Ist ein {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} , der die Abszisse des Verschiebevektors darstellt. Ein Prozentwert bezieht sich auf die Breite der Referenzbox, die durch die Eigenschaft {{cssxref("transform-box")}} definiert ist.
+
+ + + + + + + + + + + + + + + + + + + + + +
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
+

Eine Translation ist keine lineare Transformation in ℝ2 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.

+ 		10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]
+ +

Formale Syntax

+ +
translateY({{cssxref("<length-percentage>")}})
+
+ +

Beispiel

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translateY(10px);
+  background-color: pink;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Examples", 250, 250)}}

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}{{Spec2("CSS3 Transforms")}}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ +

{{Compat("css.types.transform-function")}}

+ +

See also

+ + diff --git a/files/de/web/css/transform-function/translatez()/index.html b/files/de/web/css/transform-function/translatez()/index.html deleted file mode 100644 index 5a3f6876da..0000000000 --- a/files/de/web/css/transform-function/translatez()/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: translateZ() -slug: Web/CSS/transform-function/translateZ() -tags: - - 3D - - CSS - - CSS Funktion - - CSS Transformation - - Funktion - - Referenz -translation_of: Web/CSS/transform-function/translateZ() ---- -
{{CSSRef}}
- -

Die CSS-Funktion translateZ() positioniert ein Element entlang der Z-Achse im 3D-Raum neu, d. h. näher zum Betrachter hin oder weiter von ihm weg. Ihr Ergebnis ist ein {{cssxref("<transform-function>")}} Datentyp.

- -
{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}
- - - -

Diese Transformation wird durch einen {{cssxref("<length>")}}-Wert definiert, der angibt, wie weit sich das Element oder die Elemente nach innen oder nach außen bewegen.

- -

In den obigen interaktiven Beispielen wurden die Werte perspective: 550px; gesetzt, um einen 3D-Raum zu erzeugen, und transform-style: preserve-3d;, damit die Kinder-elemente, die 6 Seiten des Würfels, auch im 3D-Raum positioniert werden, auf den Würfel gesetzt.

- -
-

Hinweis: translateZ(tz) ist gleichzusetzen mit translate3d(0, 0, tz).

-
- -

Syntax

- -
translateZ(tz)
-
- -

Werte

- -
-
tz
-
Ein {{cssxref("<Länge>")}} Wert, der die Z-Komponente des Verschiebungsvektors darstellt. Ein positiver Wert verschiebt das Element zum Betrachter hin, ein negativer Wert weiter vom Betrachter weg.
-
- - - - - - - - - - - - - - - - - -
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden. 10000100001t0001
- -

Beispiel

- -

In diesem Beispiel werden zwei Boxen erstellt. Einer wird normal auf der Seite positioniert, ohne dass er übersetzt wird. Der zweite wird durch Anwendung der Perspektive verändert, um einen 3D-Raum zu erzeugen, und dann in Richtung des Benutzers bewegt.

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
- -

CSS

- -
div {
-  position: relative;
-  width: 60px;
-  height: 60px;
-  left: 100px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: perspective(500px) translateZ(200px);
-  background-color: pink;
-}
-
- -

Was hier wirklich wichtig ist, ist die Klasse "moved"; lassen Sie uns einen Blick darauf werfen, was sie tut. Zunächst positioniert die Funktion perspective() den Betrachter relativ zu der Ebene, die bei z=0 liegt (im Wesentlichen die Oberfläche des Bildschirms). Ein Wert von 500px bedeutet, dass sich der Benutzer 500 Pixel "vor" dem Bild befindet, das bei z=0 liegt.

- -

Dann verschiebt die Funktion translateZ() das Element um 200 Pixel vom Bildschirm "nach außen", in Richtung des Benutzers. Dies hat den Effekt, dass das Element größer erscheint, wenn es auf einem 2D-Display betrachtet wird, oder näher, wenn es mit einem VR-Headset oder einem anderen 3D-Anzeigegerät betrachtet wird.

- -

Beachten Sie, wenn der perspective()-Wert kleiner ist als der translateZ()-Wert, wie z.B. transform: perspective(200px) translateZ(300px); das transformierte Element wird nicht sichtbar sein, da es weiter als der Viewport des Benutzers ist. Je kleiner der Unterschied zwischen den Werten von perspective() und translateZ() ist, desto näher ist der Benutzer am Element und desto größer erscheint das übersetzte Element.

- -

Ergebnis

- -

{{EmbedLiveSample("Examples", 250, 250)}}

- -

Specifications

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Fügt eine 3D-Transformationsfunktion zum CSS Transform-Standard hinzu.
- -

Browser-Kompatibilität

- -

{{Compat("css.types.transform-function")}}

- -

Siehe auch

- - diff --git a/files/de/web/css/transform-function/translatez/index.html b/files/de/web/css/transform-function/translatez/index.html new file mode 100644 index 0000000000..6b19b25096 --- /dev/null +++ b/files/de/web/css/transform-function/translatez/index.html @@ -0,0 +1,127 @@ +--- +title: translateZ() +slug: Web/CSS/transform-function/translateZ +tags: + - 3D + - CSS + - CSS Funktion + - CSS Transformation + - Funktion + - Referenz +translation_of: Web/CSS/transform-function/translateZ() +original_slug: Web/CSS/transform-function/translateZ() +--- +
{{CSSRef}}
+ +

Die CSS-Funktion translateZ() positioniert ein Element entlang der Z-Achse im 3D-Raum neu, d. h. näher zum Betrachter hin oder weiter von ihm weg. Ihr Ergebnis ist ein {{cssxref("<transform-function>")}} Datentyp.

+ +
{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}
+ + + +

Diese Transformation wird durch einen {{cssxref("<length>")}}-Wert definiert, der angibt, wie weit sich das Element oder die Elemente nach innen oder nach außen bewegen.

+ +

In den obigen interaktiven Beispielen wurden die Werte perspective: 550px; gesetzt, um einen 3D-Raum zu erzeugen, und transform-style: preserve-3d;, damit die Kinder-elemente, die 6 Seiten des Würfels, auch im 3D-Raum positioniert werden, auf den Würfel gesetzt.

+ +
+

Hinweis: translateZ(tz) ist gleichzusetzen mit translate3d(0, 0, tz).

+
+ +

Syntax

+ +
translateZ(tz)
+
+ +

Werte

+ +
+
tz
+
Ein {{cssxref("<Länge>")}} Wert, der die Z-Komponente des Verschiebungsvektors darstellt. Ein positiver Wert verschiebt das Element zum Betrachter hin, ein negativer Wert weiter vom Betrachter weg.
+
+ + + + + + + + + + + + + + + + + +
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden. 10000100001t0001
+ +

Beispiel

+ +

In diesem Beispiel werden zwei Boxen erstellt. Einer wird normal auf der Seite positioniert, ohne dass er übersetzt wird. Der zweite wird durch Anwendung der Perspektive verändert, um einen 3D-Raum zu erzeugen, und dann in Richtung des Benutzers bewegt.

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+ +

CSS

+ +
div {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  left: 100px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: perspective(500px) translateZ(200px);
+  background-color: pink;
+}
+
+ +

Was hier wirklich wichtig ist, ist die Klasse "moved"; lassen Sie uns einen Blick darauf werfen, was sie tut. Zunächst positioniert die Funktion perspective() den Betrachter relativ zu der Ebene, die bei z=0 liegt (im Wesentlichen die Oberfläche des Bildschirms). Ein Wert von 500px bedeutet, dass sich der Benutzer 500 Pixel "vor" dem Bild befindet, das bei z=0 liegt.

+ +

Dann verschiebt die Funktion translateZ() das Element um 200 Pixel vom Bildschirm "nach außen", in Richtung des Benutzers. Dies hat den Effekt, dass das Element größer erscheint, wenn es auf einem 2D-Display betrachtet wird, oder näher, wenn es mit einem VR-Headset oder einem anderen 3D-Anzeigegerät betrachtet wird.

+ +

Beachten Sie, wenn der perspective()-Wert kleiner ist als der translateZ()-Wert, wie z.B. transform: perspective(200px) translateZ(300px); das transformierte Element wird nicht sichtbar sein, da es weiter als der Viewport des Benutzers ist. Je kleiner der Unterschied zwischen den Werten von perspective() und translateZ() ist, desto näher ist der Benutzer am Element und desto größer erscheint das übersetzte Element.

+ +

Ergebnis

+ +

{{EmbedLiveSample("Examples", 250, 250)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Fügt eine 3D-Transformationsfunktion zum CSS Transform-Standard hinzu.
+ +

Browser-Kompatibilität

+ +

{{Compat("css.types.transform-function")}}

+ +

Siehe auch

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