From 4ab365b110f2f1f2b736326b7059244a32115089 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:38 +0100 Subject: unslug de: move --- .../css_transformationen_verwenden/index.html | 82 ---------------------- .../css_transforms/using_css_transforms/index.html | 82 ++++++++++++++++++++++ 2 files changed, 82 insertions(+), 82 deletions(-) delete mode 100644 files/de/web/css/css_transforms/css_transformationen_verwenden/index.html create mode 100644 files/de/web/css/css_transforms/using_css_transforms/index.html (limited to 'files/de/web/css/css_transforms') diff --git a/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html b/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html deleted file mode 100644 index 0d761f544f..0000000000 --- a/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: CSS Transformationen verwenden -slug: Web/CSS/CSS_Transforms/CSS_Transformationen_verwenden -tags: - - CSS - - CSS Transformationen - - CSS3 - - Fortgeschritten - - Guide -translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms ---- -
{{CSSRef}}
- -

Durch Modifizierung des Koordinatenraums ändern CSS Transformationen den Umriss und die Position des betreffenden Inhalts ohne den normalen Dokumentfluss zu unterbrechen. Diese Anleitung bietet eine Einführung in die Verwendung von Transformationen.

- -

CSS Transformationen sind als eine Reihe von CSS Eigenschaften implementiert, die es erlauben, affine lineare Transformationen auf HTML Elemente anzuwenden. Diese Transformationen beinhalten Drehung, Verzerrung, Skalierung und Verschiebung sowohl im ebenen als auch im 3D Raum.

- -
-

Nur Elemente, die durch das Box-Modell positioniert werden, können transformiert werden. Als Faustregel gilt, dass ein Element durch das Box-Modell positioniert wird, wenn es display: block hat.

-
- -

CSS Transformationseigenschaften

- -

Zwei Haupteigenschaften werden dazu verwendet, CSS Transformationen zu definieren: {{cssxref("transform")}} und {{cssxref("transform-origin")}}.

- -
-
{{cssxref("transform")}}
-
Bestimmt die Transformationen, die auf das Element angewendet werden. Sie ist eine leerzeichenseparierte Liste von Transformationen, welche eine nach der anderen angewendet werden, wie durch die Zusammensetzungsoperation verlangt.
-
{{cssxref("transform-origin")}}
-
Bestimmt die Position des Ursprungs. Standardmäßig ist dieser in der Mitte des Elements und kann verschoben werden. Er wird von mehreren Transformationen verwendet wie Drehung, Skalierung oder Verzerrung, die einen bestimmten Punkt als Parameter benötigen.
-
- -

Beispiele

- -

Hier ist ein unverändertes Bild des MDN-Logos:

- -

MDN Logo

- -

Drehung

- -

Dieses Beispiel erstellt einen iframe, der Googles Homepage beinhaltet, die um 90 Grad um die linke untere Ecke gedreht wurde.

- -
<img style="transform: rotate(90deg);
-            transform-origin: bottom left;"
-     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
-
- -

{{EmbedLiveSample('Rotating', 'auto', 240) }}

- -

Verzerrung und Verschiebung

- -

Dieses Beispiel erstellt einen iframe, der Googles Homepage beinhaltet, verzerrt um 10 Grad und verschoben um 150 Pixel auf der x-Achse.

- -
<img style="transform: skewx(10deg) translatex(150px);
-            transform-origin: bottom left;"
-     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
- -

{{EmbedLiveSample('Skewing_and_translating') }}

- -

3D-spezifische CSS Eigenschaften

- -

Die Anwendung von CSS Transformationen im dreidimensionalen Raum ist ein wenig komplexer. Zunächst muss der 3D Raum konfiguriert werden, indem ihm eine Perspektive gegeben wird. Anschließend muss konfiguriert werden, wie die 2D Elemente sich in diesem Raum verhalten.

- -

Eine Perspektive einrichten

- -

Das erste zu setzende Element ist die {{cssxref("perspective")}}. Die Perspektive ist das, was uns den 3D-Eindruck vermittelt. Je weiter die Elemente vom Betrachter entfernt sind, desto kleiner sind sie.

- -

{{page("/en-US/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}}

- -

Das zweite Element, das konfiguriert werden muss, ist die Position des Betrachters mit der Eigenschaft {{ cssxref("perspective-origin") }}. Standardmäßig ist die Perspektive auf den Betrachter zentriert, was nicht immer ausreichend ist.

- -

{{page("/en-US/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}}

- -

Sobald Sie dies getan haben, können Sie das Element im 3D-Raum bearbeiten.

- -

Siehe auch

- - diff --git a/files/de/web/css/css_transforms/using_css_transforms/index.html b/files/de/web/css/css_transforms/using_css_transforms/index.html new file mode 100644 index 0000000000..0d761f544f --- /dev/null +++ b/files/de/web/css/css_transforms/using_css_transforms/index.html @@ -0,0 +1,82 @@ +--- +title: CSS Transformationen verwenden +slug: Web/CSS/CSS_Transforms/CSS_Transformationen_verwenden +tags: + - CSS + - CSS Transformationen + - CSS3 + - Fortgeschritten + - Guide +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +--- +
{{CSSRef}}
+ +

Durch Modifizierung des Koordinatenraums ändern CSS Transformationen den Umriss und die Position des betreffenden Inhalts ohne den normalen Dokumentfluss zu unterbrechen. Diese Anleitung bietet eine Einführung in die Verwendung von Transformationen.

+ +

CSS Transformationen sind als eine Reihe von CSS Eigenschaften implementiert, die es erlauben, affine lineare Transformationen auf HTML Elemente anzuwenden. Diese Transformationen beinhalten Drehung, Verzerrung, Skalierung und Verschiebung sowohl im ebenen als auch im 3D Raum.

+ +
+

Nur Elemente, die durch das Box-Modell positioniert werden, können transformiert werden. Als Faustregel gilt, dass ein Element durch das Box-Modell positioniert wird, wenn es display: block hat.

+
+ +

CSS Transformationseigenschaften

+ +

Zwei Haupteigenschaften werden dazu verwendet, CSS Transformationen zu definieren: {{cssxref("transform")}} und {{cssxref("transform-origin")}}.

+ +
+
{{cssxref("transform")}}
+
Bestimmt die Transformationen, die auf das Element angewendet werden. Sie ist eine leerzeichenseparierte Liste von Transformationen, welche eine nach der anderen angewendet werden, wie durch die Zusammensetzungsoperation verlangt.
+
{{cssxref("transform-origin")}}
+
Bestimmt die Position des Ursprungs. Standardmäßig ist dieser in der Mitte des Elements und kann verschoben werden. Er wird von mehreren Transformationen verwendet wie Drehung, Skalierung oder Verzerrung, die einen bestimmten Punkt als Parameter benötigen.
+
+ +

Beispiele

+ +

Hier ist ein unverändertes Bild des MDN-Logos:

+ +

MDN Logo

+ +

Drehung

+ +

Dieses Beispiel erstellt einen iframe, der Googles Homepage beinhaltet, die um 90 Grad um die linke untere Ecke gedreht wurde.

+ +
<img style="transform: rotate(90deg);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+
+ +

{{EmbedLiveSample('Rotating', 'auto', 240) }}

+ +

Verzerrung und Verschiebung

+ +

Dieses Beispiel erstellt einen iframe, der Googles Homepage beinhaltet, verzerrt um 10 Grad und verschoben um 150 Pixel auf der x-Achse.

+ +
<img style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+ +

{{EmbedLiveSample('Skewing_and_translating') }}

+ +

3D-spezifische CSS Eigenschaften

+ +

Die Anwendung von CSS Transformationen im dreidimensionalen Raum ist ein wenig komplexer. Zunächst muss der 3D Raum konfiguriert werden, indem ihm eine Perspektive gegeben wird. Anschließend muss konfiguriert werden, wie die 2D Elemente sich in diesem Raum verhalten.

+ +

Eine Perspektive einrichten

+ +

Das erste zu setzende Element ist die {{cssxref("perspective")}}. Die Perspektive ist das, was uns den 3D-Eindruck vermittelt. Je weiter die Elemente vom Betrachter entfernt sind, desto kleiner sind sie.

+ +

{{page("/en-US/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}}

+ +

Das zweite Element, das konfiguriert werden muss, ist die Position des Betrachters mit der Eigenschaft {{ cssxref("perspective-origin") }}. Standardmäßig ist die Perspektive auf den Betrachter zentriert, was nicht immer ausreichend ist.

+ +

{{page("/en-US/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}}

+ +

Sobald Sie dies getan haben, können Sie das Element im 3D-Raum bearbeiten.

+ +

Siehe auch

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