From 869dd2069c695ee7040cd3261713212155819f42 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Mon, 14 Dec 2020 12:18:12 -0500 Subject: final dump 2020-12-14 --- .../css_transformationen_verwenden/index.html | 220 +++------------------ 1 file changed, 27 insertions(+), 193 deletions(-) (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 index 83a9ada0d2..0d761f544f 100644 --- a/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html +++ b/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html @@ -15,41 +15,47 @@ translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms

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-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.
{{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

-

Drehung

+

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

-

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

+

MDN Logo

-

Livebeispiel ansehen Screenshot des Beispiels ansehen

+

Drehung

-
<div style="transform: rotate(90deg); transform-origin: bottom left;">
-  <iframe src="http://www.google.com/" width="500" height="600"></iframe>
-</div>
+
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">
 

 
-
Verzerrung und Verschiebung

+
{{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.

 
-
Livebeispiel ansehen  Screenshot des Beispiels ansehen

+
<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">

 
-
<div style="transform: skewx(10deg) translatex(150px);
-            transform-origin: bottom left;">
-  <iframe src="http://www.google.com/" width="600" height="500"></iframe>
-</div>
-

+
{{EmbedLiveSample('Skewing_and_translating') }}

 
 
3D-spezifische CSS Eigenschaften

 
@@ -57,192 +63,20 @@ translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms
 
 
Eine Perspektive einrichten

 
-
Das erste Element ist das Setzen der Perspektive. Die Perspektive ist, was den dreidimensionalen Eindruck vermittelt. Je weiter weg Elemente vom Betrachter sind, desto kleiner sind sie.

-
-
Wie schnell sie kleiner werden, wird durch die {{cssxref("perspective")}} Eigenschaft bestimmt. Je kleiner deren Wert ist, desto tiefer ist die Perspektive.

-
-
- 
-  
-   
-   
-  
- 
- 
-  
-   
-   
-  
- 
-
perspective:0;perspective:250px;

-    

-    

-    
   

-
-    
1

-
-    
2

-
-    
3

-
-    
4

-
-    
5

-
-    
6

-    

-    

-   		
-    

-    

-    
   

-
-    
1

-
-    
2

-
-    
3

-
-    
4

-
-    
5

-
-    
6

-    

-    

-   

-
-
- 
-  
-   
-   
-  
- 
- 
-  
-   
-   
-  
- 
-
perspective:300px;perspective:350px;

-    

-    

-    
   

-
-    
1

-
-    
2

+
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.

 
-    
3

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

 
-    
4

+
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.

 
-    
5

-
-    
6

-    

-    

-   		
-    

-    

-    
   

-
-    
1

-
-    
2

-
-    
3

-
-    
4

-
-    
5

-
-    
6

-    

-    

-   

-
-
Das zweite Element ist die Konfiguration der Position des Betrachters mittels der {{cssxref("perspective-origin")}} Eigenschaft. Standardmäßig ist die Perspektive auf den Betrachter zentriert, was nicht immer passend ist.

-
-

-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
perspective-origin:150px 150px;perspective-origin:50% 50%;perspective-origin:-50px -50px;

-    

-    

-    
   

-
-    
1

-
-    
2

-
-    
3

-
-    
4

-
-    
5

-
-    
6

-    

-    

-   		
-    

-    

-    
   

-
-    
1

-
-    
2

-
-    
3

-
-    
4

-
-    
5

-
-    
6

-    

-    

-   		
-    

-    

-    
   

-
-    
1

-
-    
2

-
-    
3

-
-    
4

-
-    
5

-
-    
6

-    

-    

-   

-

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

 
-
Sobald dies getan ist, kann mit der Arbeit am Element im dreidimensionalen Raum begonnen werden.

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

 
 
Siehe auch

 
 
-- 
cgit v1.2.3-54-g00ecf