From ba5d6f9610d6bb352eecfa3ded1bb99bc9892916 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Fri, 11 Dec 2020 19:00:14 -0500 Subject: dump 2020-12-11 --- files/de/web/css/css_functions/index.html | 255 +++++++++++ .../stacking_and_float/index.html | 152 +++++++ .../stacking_context_example_1/index.html | 132 ++++++ .../stacking_context_example_2/index.html | 140 ++++++ .../stacking_context_example_3/index.html | 186 ++++++++ .../stacking_without_z-index/index.html | 128 ++++++ files/de/web/css/css_values_and_units/index.html | 493 +++++++++++++++++++++ files/de/web/css/transform-function/index.html | 295 ++++++++++++ .../transform-function/translate3d()/index.html | 147 ++++++ .../css/transform-function/translatex/index.html | 125 ++++++ .../css/transform-function/translatey()/index.html | 123 +++++ .../css/transform-function/translatez()/index.html | 128 ++++++ files/de/web/css/translate/index.html | 136 ++++++ 13 files changed, 2440 insertions(+) create mode 100644 files/de/web/css/css_functions/index.html create mode 100644 files/de/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html create mode 100644 files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html create mode 100644 files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html create mode 100644 files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html create mode 100644 files/de/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html create mode 100644 files/de/web/css/css_values_and_units/index.html create mode 100644 files/de/web/css/transform-function/index.html create mode 100644 files/de/web/css/transform-function/translate3d()/index.html create mode 100644 files/de/web/css/transform-function/translatex/index.html create mode 100644 files/de/web/css/transform-function/translatey()/index.html create mode 100644 files/de/web/css/transform-function/translatez()/index.html create mode 100644 files/de/web/css/translate/index.html (limited to 'files/de/web/css') diff --git a/files/de/web/css/css_functions/index.html b/files/de/web/css/css_functions/index.html new file mode 100644 index 0000000000..648c96c2c0 --- /dev/null +++ b/files/de/web/css/css_functions/index.html @@ -0,0 +1,255 @@ +--- +title: CSS Funktionsnotation +slug: Web/CSS/CSS_Functions +tags: + - CSS + - CSS Datentypen + - CSS Funktion + - Funktionen + - Funktionsnotation + - Referenz + - Typen + - datentpen +translation_of: Web/CSS/CSS_Functions +--- +
{{CSSRef}}
+ +

Die CSS-Funktionsnotation ist ein Typ von CSS-Werten, der komplexere Datentypen darstellen oder spezielle Datenverarbeitungen oder Berechnungen aufrufen kann.

+ +

Syntax

+ +
selector {
+  property: functional-notation( [argument]? [, argument]! );
+}
+ +

Die Syntax beginnt mit dem Namen der funktionalen Notation, gefolgt von einer linken Klammer (. Als Nächstes folgen das/die Notationsargument(e), und die Funktion wird mit einer schließenden Klammer ) abgeschlossen.

+ +

Funktionen können mehrere Argumente annehmen, die ähnlich wie CSS-Eigenschaftswerte formatiert sind. Leerzeichen sind erlaubt, aber innerhalb der Klammern sind sie optional. In einigen Funktionsnotationen werden mehrere Argumente durch Kommas getrennt, während andere Leerzeichen verwenden.

+ +

Index

+ +

Zu den funktionalen Notationen, die durch eine Reihe von CSS-Spezifikationen definiert sind, gehören die folgenden:

+ +
A + + +B + + +C + + +D + + +E + + +F + + +G + + +H + + +I + + +L + + +M + + +O + + +P + + +R + + +S + + +T + + +U + + +V + + +
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Values")}}{{Spec2("CSS4 Values")}}Hinzugefügte Funktionsnotation toggle(), attr(), calc(), min(), max(), clamp(), round(), mod(), rem(), mod(), sin(), cos(), tan(), asin(), acos(), atan(), atan2(), pow(), sqrt(), hypot(), log(), exp(), abs() und sign().
{{SpecName("CSS3 Values")}}{{Spec2("CSS3 Values")}}Fügt die Funktionsnotation calc() zu.
{{SpecName("CSS4 Colors")}}{{Spec2("CSS4 Colors")}}Fügt kommmalose Syntaxen für die funktionale Notation rgb(), rgba(), hsl(), und hsla() hinzu.
+ Erlaubt Alpha-Werte in rgb() und hsl(), und macht rgba() und hsla() into (deprecated) zu (veralteten) Aliasen für diese.
+ Fügt die Funktionen hwb(), device-cmyk() und color() hinzu.
{{SpecName("CSS3 Colors")}}{{Spec2("CSS3 Colors")}}Fügt rgba(), hsl(), hsla() als funktionale Notation hinzu.
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}}Fügt element(), image(), image-set() und conic-gradient() als Funktionsnotation hinzu.
+ +

Siehe auch

+ + diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html new file mode 100644 index 0000000000..40e655caef --- /dev/null +++ b/files/de/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -0,0 +1,152 @@ +--- +title: Stapeln mit fließenden Blöcken +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +tags: + - CSS + - CSS z-index + - CSS z-index verstehen + - Fortgeschritten + - Leitfaden + - Referenz + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +
{{cssref}}
+ +

Bei fließenden Blöcken (float) ist die Stapelreihenfolge ein wenig anders. Fließende Blöcke werden zwischen nicht positionierten Blöcken und positionierten Blöcken platziert:

+ +
    +
  1. Der Hintergrund und die Ränder des Wurzelelements
    2. +
  2. Nachfolgende nicht positionierte Blöcke, in der Reihenfolge ihres Erscheinens im HTML
    3. +
  3. Fließende Blöcke
    4. +
  4. Nachfolgende positionierte Elemente, in der Reihenfolge ihres Erscheinens in der HTML-Datei
    5. +
+ +

Wie Sie im Beispiel unten sehen können, sind Hintergrund und Rahmen des nicht positionierten Blocks (DIV #4) von fließenden Blöcken völlig unbeeinflusst, der Inhalt ist jedoch betroffen. Dies geschieht gemäß dem Standard-Float-Verhalten. Dieses Verhalten kann mit einer zusätzlichen Regel in der obigen Liste dargestellt werden:

+ +
    +
  1. Der Hintergrund und die Ränder des Wurzelelements
    2. +
  2. Nachfolgende nicht positionierte Blöcke, in der Reihenfolge ihres Erscheinens im HTML
    3. +
  3. Schwebende Blöcke
    4. +
  4. Nachfolgende nicht-positionierte Inline-Elemente
    5. +
  5. Nachfolgende positionierte Elemente, in der Reihenfolge ihres Erscheinens in der HTML
    6. +
+ +

Example of stacking rules with floating boxes

+ +
+

Hinweis: Wenn ein Deckkraftwert (opacity) auf den nicht positionierten Block (DIV #4) angewendet wird, passiert etwas Seltsames: Der Hintergrund und der Rand dieses Blocks ragen über die schwebenden Blöcke und die positionierten Blöcke hinaus. Das liegt an einem besonderen Teil der Spezifikation: Das Anwenden eines Deckkraftwerts erzeugt einen neuen Stapelkontext (siehe What No One Told You About Z-Index).

+
+ +

Quellcode für das Beispiel

+ +

HTML

+ +
<div id="abs1">
+  <b>DIV #1</b><br />position: absolute;</div>
+
+<div id="flo1">
+  <b>DIV #2</b><br />float: left;</div>
+
+<div id="flo2">
+  <b>DIV #3</b><br />float: right;</div>
+
+<br />
+
+<div id="sta1">
+  <b>DIV #4</b><br />no positioning</div>
+
+<div id="abs2">
+  <b>DIV #5</b><br />position: absolute;</div>
+
+<div id="rel1">
+  <b>DIV #6</b><br />position: relative;</div>
+
+
+ +

CSS

+ +
div {
+  padding: 10px;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 10px;
+  right: 140px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  height: 100px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+
+#flo1 {
+  margin: 0px 10px 0px 20px;
+  float: left;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#flo2 {
+  margin: 0px 20px 0px 10px;
+  float: right;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#abs2 {
+  position: absolute;
+  width: 150px;
+  height: 100px;
+  top: 80px;
+  left: 100px;
+  border: 1px dashed #990;
+  background-color: #fdd;
+}
+
+#rel1 {
+  position: relative;
+  border: 1px dashed #996;
+  background-color: #cff;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+
+ +

See also

+ + + +
+

Original Dokumenteninformation

+ + +
diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html new file mode 100644 index 0000000000..b1a48f0ebc --- /dev/null +++ b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -0,0 +1,132 @@ +--- +title: Stapelkontext Beispiel 1 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +
{{cssref}}
+ +

« CSS « Understanding CSS z-index

+ +

Stapelkontext Beispiel 1

+ +

Lassen Sie uns mit einem einfachen Beispiel beginnen. Im Wurzel-Stapelkontext haben wir zwei DIVs (DIV #1 und DIV #3), beide relativ positioniert, aber ohne {{cssxref("z-index")}} Eigenschaften. Innerhalb von DIV #1 befindet sich ein absolut positioniertes DIV #2, während sich in DIV #3 ein absolut positioniertes DIV #4 befindet, beide ohne z-index Eigenschaften.

+ +

Der einzige Stapelkontext ist der Root-Kontext. Ohne z-indizes werden die Elemente in der Reihenfolge ihres Auftretens gestapelt.

+ +

Stacking context example 1

+ +

Wenn DIV #2 ein positiver z-index Wert (nicht Null und nicht automatisch) zugewiesen wird, wird es über allen anderen DIVs gerendert.

+ +

Stacking context example 1

+ +

Wenn dann DIV #4 ebenfalls einen positiven z-index zugewiesen bekommt, der größer ist als der z-index von DIV #2, wird es über allen anderen DIVs einschließlich DIV #2 gerendert.

+ +

Stacking context example 1

+ +

In diesem letzten Beispiel können Sie sehen, dass DIV #2 und DIV #4 keine Geschwister sind, da sie zu verschiedenen Eltern in der Hierarchie der HTML-Elemente gehören. Trotzdem kann die Stapelung von DIV #4 in Bezug auf DIV #2 durch z-index gesteuert werden. Da DIV #1 und DIV #3 kein z-index-Wert zugewiesen ist, bilden sie keinen Stapelkontext. Das bedeutet, dass ihr gesamter Inhalt, einschließlich DIV #2 und DIV #4, zu demselben Wurzel-Stacking-Kontext gehört.

+ +

In Bezug auf die Stapelkontexte werden DIV #1 und DIV #3 einfach in das Wurzelelement assimiliert, und die resultierende Hierarchie ist die folgende:

+ + + +
Hinweis: DIV #1 und DIV #3 sind nicht lichtdurchlässig. Es ist wichtig, sich daran zu erinnern, dass das Zuweisen einer Deckkraft von weniger als 1 zu einem positionierten Element implizit einen Stapelkontext erzeugt, genau wie das Hinzufügen eines z-index Wertes. Und dieses Beispiel zeigt, was passiert, wenn ein übergeordnetes Element keinen Stapelkontext erzeugt.
+ +

Beispiel

+ +

HTML

+ +
<div id="div1">
+<br /><span class="bold">DIV #1</span>
+<br />position: relative;
+   <div id="div2">
+   <br /><span class="bold">DIV #2</span>
+   <br />position: absolute;
+   <br />z-index: 1;
+   </div>
+</div>
+
+<br />
+
+<div id="div3">
+<br /><span class="bold">DIV #3</span>
+<br />position: relative;
+   <div id="div4">
+   <br /><span class="bold">DIV #4</span>
+   <br />position: absolute;
+   <br />z-index: 2;
+   </div>
+</div>
+
+</body></html>
+
+ +

CSS

+ +
.bold {
+    font-weight: bold;
+    font: 12px Arial;
+}
+#div1,
+#div3 {
+    height: 80px;
+    position: relative;
+    border: 1px dashed #669966;
+    background-color: #ccffcc;
+    padding-left: 5px;
+}
+#div2 {
+    opacity: 0.8;
+    z-index: 1;
+    position: absolute;
+    width: 150px;
+    height: 200px;
+    top: 20px;
+    left: 170px;
+    border: 1px dashed #990000;
+    background-color: #ffdddd;
+    text-align: center;
+}
+#div4 {
+    opacity: 0.8;
+    z-index: 2;
+    position: absolute;
+    width: 200px;
+    height: 70px;
+    top: 65px;
+    left: 50px;
+    border: 1px dashed #000099;
+    background-color: #ddddff;
+    text-align: left;
+    padding-left: 10px;
+}
+ +

Ergebnis

+ +

{{ EmbedLiveSample('Example', '100%', '250px', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}

+ +

See also

+ + + +
+

Original Dokumenteninformation

+ + +
diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html new file mode 100644 index 0000000000..bff33304e9 --- /dev/null +++ b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -0,0 +1,140 @@ +--- +title: Stapelkontext Beispiel 2 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +
{{cssref}}
+ +

« CSS « Understanding CSS z-index

+ +

Stapelkontext Beispiel 2

+ +

Dies ist ein sehr einfaches Beispiel, aber es ist der Schlüssel zum Verständnis des Konzepts des Stapelkontexts. Es gibt dieselben vier DIVs des vorherigen Beispiels, aber jetzt werden {{cssxref("z-index")}} Eigenschaften auf beiden Ebenen der Hierarchie zugewiesen.

+ +

{{ EmbedLiveSample('Example_source_code', '352', '270') }}

+ +

Sie können sehen, dass DIV #2 (z-index: 2) über DIV #3 (z-index: 1) liegt, da beide zum selben Stapelkontext gehören (dem Wurzel-Kontext), so dass die z-index Werte bestimmen, wie Elemente gestapelt werden.

+ +

Was als merkwürdig angesehen werden kann, ist, dass DIV #2 (z-index: 2) über DIV #4 (z-index: 10) liegt, trotz ihrer z-index Werte. Der Grund dafür ist, dass sie nicht zum selben Stapelkontext gehören. DIV #4 gehört zu dem Stacking-Kontext, der durch DIV #3 erzeugt wurde, und wie bereits erklärt, befindet sich DIV #3 (und sein gesamter Inhalt) unter DIV #2.

+ +

Zum besseren Verständnis der Situation sehen Sie hier die Hierarchie des Stapelkontexts:

+ + + +
Hinweis: Es ist zu beachten, dass sich die HTML-Hierarchie im Allgemeinen von der Stapelkontexthierarchie unterscheidet. In der Stapelkontexthierarchie werden Elemente, die keinen Stapelkontext erzeugen, an ihrem übergeordneten Element zusammengeklappt.
+ +

Beispiel

+ +

HTML

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+#div2 { z-index: 2; }
+#div3 { z-index: 1; }
+#div4 { z-index: 10; }
+
+#div1,#div3 {
+   height: 80px;
+   position: relative;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#div2 {
+   opacity: 0.8;
+   position: absolute;
+   width: 150px;
+   height: 200px;
+   top: 20px;
+   left: 170px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#div4 {
+   opacity: 0.8;
+   position: absolute;
+   width: 200px;
+   height: 70px;
+   top: 65px;
+   left: 50px;
+   border: 1px dashed #000099;
+   background-color: #ddddff;
+   text-align: left;
+   padding-left: 10px;
+}
+
+
+</style></head>
+
+<body>
+
+    <br />
+
+    <div id="div1"><br />
+        <span class="bold">DIV #1</span><br />
+        position: relative;
+        <div id="div2"><br />
+            <span class="bold">DIV #2</span><br />
+            position: absolute;<br />
+            z-index: 2;
+        </div>
+    </div>
+
+    <br />
+
+    <div id="div3"><br />
+        <span class="bold">DIV #3</span><br />
+        position: relative;<br />
+        z-index: 1;
+        <div id="div4"><br />
+            <span class="bold">DIV #4</span><br />
+            position: absolute;<br />
+            z-index: 10;
+        </div>
+    </div>
+
+</body>
+</html>
+
+ +

Siehe auch

+ + + +
+

Original Dokumenteninformation

+ + +
diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html new file mode 100644 index 0000000000..165cd88bd6 --- /dev/null +++ b/files/de/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -0,0 +1,186 @@ +--- +title: Stapelkontext Beispiel 3 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +
{{cssref}}
+ +

« CSS « Understanding CSS z-index

+ +

Stapelkontext Beispiel 3

+ +

Dieses letzte Beispiel zeigt Probleme, die entstehen, wenn mehrere positionierte Elemente in einer mehrstufigen HTML-Hierarchie gemischt werden und wenn z-Indizes über Klassenselektoren zugewiesen werden.

+ +

Nehmen wir als Beispiel ein hierarchisches Menü mit drei Ebenen, das aus mehreren positionierten DIVs besteht. Die DIVs der zweiten und dritten Ebene erscheinen, wenn man mit dem Mauszeiger über die übergeordneten Elemente fährt oder auf sie klickt. Normalerweise wird diese Art von Menü entweder clientseitig oder serverseitig per Skript generiert, so dass die Stilregeln mit einem Klassenselektor anstelle des id-Selektors zugewiesen werden.If the three menu levels partially overlap, then managing stacking could become a problem.

+ +

Wenn sich die drei Menüebenen teilweise überlappen, könnte die Verwaltung der Stapelung zu einem Problem werden.

+ +

{{ EmbedLiveSample('Example_source_code', '320', '330') }}

+ +

Das Menü der ersten Ebene wird nur relativ positioniert, es wird also kein Stapelkontext erzeugt.

+ +

Das Menü der zweiten Ebene wird absolut innerhalb des übergeordneten Elements positioniert. Um es über alle Menüs der ersten Ebene zu legen, wird ein {{cssxref("z-index")}} verwendet. Das Problem ist, dass für jedes Menü der zweiten Ebene ein Stapelkontext erzeugt wird und jedes Menü der dritten Ebene zum Kontext seines Elternelements gehört.

+ +

Ein Menü der dritten Ebene wird also unter den folgenden Menüs der zweiten Ebene gestapelt, da alle Menüs der zweiten Ebene denselben z-index Wert haben und die Standard-Stapelregeln gelten.

+ +

Um die Situation besser zu verstehen, sehen Sie hier die Stapelkontexthierarchie:

+ + + +

Dieses Problem kann vermieden werden, indem die Überlappung zwischen den Menüs der verschiedenen Ebenen entfernt wird, oder indem individuelle (und unterschiedliche) z-index Werte verwendet werden, die über den id-Selektor anstelle des class-Selektors zugewiesen werden, oder indem die HTML-Hierarchie abgeflacht wird.

+ +
Hinweis: Im Quellcode sehen Sie, dass die Menüs der zweiten und dritten Ebene aus mehreren DIVs bestehen, die in einem absolut positionierten Container enthalten sind. Dies ist nützlich, um sie alle auf einmal zu gruppieren und zu positionieren.
+ +

Beispiel Quellcode

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+div.lev1 {
+   width: 250px;
+   height: 70px;
+   position: relative;
+   border: 2px outset #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#container1 {
+   z-index: 1;
+   position: absolute;
+   top: 30px;
+   left: 75px;
+}
+
+div.lev2 {
+   opacity: 0.9;
+   width: 200px;
+   height: 60px;
+   position: relative;
+   border: 2px outset #990000;
+   background-color: #ffdddd;
+   padding-left: 5px;
+}
+
+#container2 {
+   z-index: 1;
+   position: absolute;
+   top: 20px;
+   left: 110px;
+}
+
+div.lev3 {
+   z-index: 10;
+   width: 100px;
+   position: relative;
+   border: 2px outset #000099;
+   background-color: #ddddff;
+   padding-left: 5px;
+}
+
+</style></head>
+
+<body>
+
+<br />
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+
+   <div id="container1">
+
+      <div class="lev2">
+      <br /><span class="bold">LEVEL #2</span>
+      <br />z-index: 1;
+
+         <div id="container2">
+
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+
+         </div>
+
+      </div>
+
+      <div class="lev2">
+      <br /><span class="bold">LEVEL #2</span>
+      <br />z-index: 1;
+      </div>
+
+   </div>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+</body></html>
+
+ +

Siehe auch

+ + + +
+

Original Dokumenteninformation

+ + +
+ +

Hinweis: Der Grund, warum das Beispielbild falsch aussieht - mit der zweiten Ebene 2, die die Menüs der Ebene 3 überlagert - ist, dass die Ebene 2 Deckkraft hat, was einen neuen Stapelungskontext erzeugt. Im Grunde ist diese ganze Beispielseite falsch und irreführend.

diff --git a/files/de/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/de/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..4711fcdaef --- /dev/null +++ b/files/de/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -0,0 +1,128 @@ +--- +title: Stapeln ohne die Eigenschaft z-index +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +tags: + - CSS + - CSS z-index + - CSS z-index verstehen + - Fortgeschritten + - Leitfaden + - Referenz + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +--- +
{{cssref}}
+ +

Wenn die CSS-Eigenschaft {{cssxref("z-index")}} bei keinem Element angegeben ist, werden die Elemente in der folgenden Reihenfolge gestapelt (von unten nach oben):

+ +
    +
  1. Der Hintergrund und die Ränder des Wurzelelements
    2. +
  2. Nachfolgende nicht positionierte Blöcke, in der Reihenfolge ihres Erscheinens im HTML
    3. +
  3. Nachfolgende positionierte Elemente, in der Reihenfolge ihres Erscheinens in der HTML-Datei
    4. +
+ +

Beachten Sie, dass die CSS-Eigenschaft {{cssxref("order")}}, wenn sie das Rendering von der "Reihenfolge des Erscheinens im HTML" innerhalb von {{cssxref("flex")}}-Containern ändert, auch die Reihenfolge für den Stapelkontext beeinflusst.

+ +

Im folgenden Beispiel sind die Elemente #1 bis #4 positionierte Elemente. Element Nr. 5 ist statisch und wird daher unter den anderen vier Elementen gezeichnet, obwohl es im HTML-Markup später kommt.

+ +

Figure 1. Exemple de règles d'empilement sans propriété z-index

+ +

Quellcode für das Beispiel

+ +

HTML

+ +
<div id="abs1" class="absolute">
+  <b>DIV #1</b><br />position: absolute;</div>
+<div id="rel1" class="relative">
+  <b>DIV #2</b><br />position: relative;</div>
+<div id="rel2" class="relative">
+  <b>DIV #3</b><br />position: relative;</div>
+<div id="abs2" class="absolute">
+  <b>DIV #4</b><br />position: absolute;</div>
+<div id="sta1" class="static">
+  <b>DIV #5</b><br />position: static;</div>
+
+ +

CSS

+ +
b {
+  font-family: sans-serif;
+}
+
+div {
+  padding: 10px;
+  border: 1px dashed;
+  text-align: center;
+}
+
+.static {
+  position: static;
+  height: 80px;
+  background-color: #ffc;
+  border-color: #996;
+}
+
+.absolute {
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  background-color: #fdd;
+  border-color: #900;
+  opacity: 0.7;
+}
+
+.relative {
+  position: relative;
+  height: 80px;
+  background-color: #cfc;
+  border-color: #696;
+  opacity: 0.7;
+}
+
+#abs1 {
+  top: 10px;
+  left: 10px;
+}
+
+#rel1 {
+  top: 30px;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  top: 15px;
+  left: 20px;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  top: 10px;
+  right: 10px;
+}
+
+#sta1 {
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+
+ +

Siehe auch

+ + + +
+

Original Dokumenteninformation

+ + +
diff --git a/files/de/web/css/css_values_and_units/index.html b/files/de/web/css/css_values_and_units/index.html new file mode 100644 index 0000000000..7cde234d24 --- /dev/null +++ b/files/de/web/css/css_values_and_units/index.html @@ -0,0 +1,493 @@ +--- +title: CSS values and units +slug: Web/CSS/CSS_Values_and_Units +translation_of: Web/CSS/CSS_Values_and_Units +--- +
{{CSSRef}}
+ +

Jede CSS declaration includes a property / value pair. Depending on the property, the value can include a single integer or keyword, to a series of keywords and values with or without units. There are a common set of data types -- values and units -- that CSS properties accept. Below is an overview of most of these data types. Refer to the page for each value type for more detailed information.

+ +

Textual data types

+ + + +

Text data types are either <string>, a quoted series of characters, or an <ident>, a "CSS Identifier" which is an unquoted string. A <string> must be quoted with either single or double quotes. CSS Identifiers, listed in the specifications as <ident> or <custom-ident>, must be unquoted.

+ +

In the CSS specifications, values that can be defined by the web developer, like keyframe animations, font-family names, or grid areas are listed as a  {{cssxref("<custom-ident>")}}, {{cssxref("<string>")}}, or both.

+ +

When both quoted and unquoted user defined text values are permitted, the specification will list <custom-ident> | <string>, meaning quotes are optional, such as is the case with animation names:

+ +
@keyframe validIdent {
+  /* keyframes go here */
+}
+@keyframe 'validString' {
+  /* keyframes go here */
+}
+ +

Some text values are not valid if encompassed in quotes. For example, the value of {{cssxref("grid-area")}} can be a <custom-ident>, so if we had a grid area named content we would use it without quotes:

+ +
.item {
+  grid-area: content;
+}
+
+ +

In comparison, a data type that is a {{cssxref("<string>")}}, such as a string value of the {{cssxref("content")}} property, must be quoted:

+ +
.item::after {
+    content: "This is my content.";
+}
+
+ +

While you can generally create any name you want, including using emojis, the identifier can't be none, unset, initial, or inherit, start with a digit or two dashes, and generally you don't want it to be any other pre-defined CSS keyword. See the {{cssxref("<custom-ident>")}} and {{cssxref("<string>")}} reference pages for more details.

+ +

Pre-defined keyword values

+ +

Pre-defined keywords are text values defined by the specification for that property. These keywords are also CSS Identifiers and are therefore used without quotes.

+ +

When viewing CSS property value syntax in a CSS specification or the MDN property page, allowable keywords will be listed in the following form. The following values are the pre-defined keyword values allowed for {{cssxref("float")}}.

+ +
left | right | none | inline-start | inline-end
+ +

Such values are used without quotes:

+ +
.box {
+    float: left;
+}
+
+ +

CSS-wide values

+ +

In addition to the pre-defined keywords that are part of the specification for a property, all CSS properties accept the CSS-wide property values {{cssxref("initial")}}, {{cssxref("inherit")}}, and {{cssxref("unset")}}, which explicitly specify defaulting behaviors.

+ +

The initial keyword represents the value specified as the property’s initial value. The inherit keyword represents the computed value of the property on the element’s parent, provided it is inherited.

+ +

The unset keyword acts as either inherit or initial, depending on whether the property is inherited or not.

+ +

A fourth value of {{cssxref("revert")}} was added in the Cascade Level 4 specification, but it does not currently have good browser support.

+ +

URLs

+ +

A {{cssxref("<url>")}} type uses functional notation, which accepts a <string> that is a URL. This may be an absolute URL or a relative URL. For example, if you wanted to include a background image, you might use either of the following.

+ +
.box {
+  background-image: url("images/my-background.png");
+}
+
+.box {
+  background-image: url("https://www.exammple.com/images/my-background.png");
+}
+
+ +

The parameter for url() can be either quoted or unquoted. If unquoted, it is parsed as a <url-token>, which has extra requirements including the escaping of certain characters. See {{cssxref("<url>")}}  for more information.

+ +

Numeric data types

+ + + +

Integers

+ +

An integer is one or more decimal digits, 0 through 9, such as 1024 or -55. An integer may be preceded by a + or - symbol, with no space between the symbol and the integer.

+ +

Numbers

+ +

A {{cssxref("<number>")}} represents a real number, which may or may not have a decimal point with a fractional component, for example 0.255, 128 or -1.2. Numbers may also be preceded by a + or - symbol.

+ +

Dimensions

+ +

A {{cssxref("<dimension>")}} is a <number> with a unit attached to it, for example 45deg, 100ms, or 10px. The attached unit identifier is case insensitive. There is never a space or any other characters between a the number and the unit identifier: i.e. 1 cm is not valid.

+ +

CSS uses dimensions to specify:

+ + + +

These are all covered in subsections below.

+ +

Distance units

+ +

Where a distance unit, also known as a length, is allowed as a value for a property, this is described as the {{cssxref("<length>")}} type. There are two types of lengths in CSS: relative and absolute.

+ +

Relative length units specify a length in relation to something else. For example, em is relative to the font size on the element and vh is relative to the viewport height.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Relative length units

+
UnitRelative to
emFont size of the element.
exx-height of the element's font.
capCap height (the nominal height of capital letters) of the element's font.
chAverage character advance of a narrow glyph in the element’s font, as represented by the “0” (ZERO, U+0030) glyph.
icAverage character advance of a full width glyph in the element’s font, as represented by the “水” (CJK water ideograph, U+6C34) glyph.
remFont size of the root element.
lhLine height of the element.
rlhLine height of the root element.
vw1% of viewport's width.
vh1% of viewport's height.
vi1% of viewport's size in the root element's inline axis.
vb1% of viewport's size in the root element's block axis.
vmin1% of viewport's smaller dimension.
vmax1% of viewport's larger dimension.
+ +

Absolute length units are fixed to a physical length: either an inch or a centimeter. Many of these units are therefore more useful when the output is a fixed size media, such as print. For example, mm is a physical millimeter, 1/10th of a centimeter.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Absolute length units

+
UnitNameEquivalent to
cmCentimeters1cm = 96px/2.54
mmMillimeters1mm = 1/10th of 1cm
QQuarter-millimeters1Q = 1/40th of 1cm
inInches1in = 2.54cm = 96px
pcPicas1pc = 1/16th of 1in
ptPoints1pt = 1/72th of 1in
pxPixels1px = 1/96th of 1in
+ +

When including a length value, if the length is 0, the unit identifier is not required. Otherwise, the unit identifier is required, is case insensitive, and must come immediately after the numeric part of the value, with no space in-between.

+ +

Angle units

+ +

Angle values are represented by the type {{cssxref("<angle>")}} and accept the following values:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitNameDescription
degDegreesThere are 360 degrees in a full circle.
gradGradiansThere are 400 gradians in a full circle.
radRadiansThere are 2π radians in a full circle.
turnTurnsThere is 1 turn in a full circle.
+ +

Time units

+ +

Time values are represented by the type {{cssxref("<time>")}}. When including a time value, the unit identifier -- the s or ms -- is required. It accepts the following values.

+ + + + + + + + + + + + + + + + + + + + + +
UnitNameDescription
sSeconds
msMillisecondsThere are 1,000 milliseconds in a second.
+ +

Frequency units

+ +

Frequency values are represented by the type {{cssxref("<frequency>")}}. It accepts the following values.

+ + + + + + + + + + + + + + + + + + + + + +
UnitNameDescription
HzHertzRepresents the number of occurrences per second.
kHzKiloHertzA kiloHertz is 1000 Hertz.
+ +

1Hz, which can also be written as 1hz or 1HZ, is one cycle per second.

+ +

Resolution unit

+ +

Resolution units are represented by the type {{cssxref("<resolution>")}}. They represent the size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a CSS inch, centimeter, or pixel. It accepts the following values:

+ + + + + + + + + + + + + + + + + + + + + + +
UnitDescription
dpiDots per inch.
dpcmDots per centimetre.
dppx, xDots per px unit.
+ +

Percentages

+ +

A {{cssxref("<percentage>")}} is a type that represents a fraction of some other value.

+ +

Percentage values are always relative to another quantity, for example a length. Each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property of the same element, the value of a property of an ancestor element, a measurement of a containing block, or something else.

+ +

As an example, if you specify the {{cssxref("width")}} of a box as a percentage, it refers to the percentage of the box's parent's computed width:

+ +
.box {
+  width: 50%;
+}
+ +

Mixing percentages and dimensions

+ +

Some properties accept a dimension that could be either one of two types, for example a <length> or a <percentage>. In this case the allowed value is detailed in the specification as a combination unit, e.g. {{cssxref("<length-percentage>")}}. Other possible combinations are as follows:

+ + + +

Special data types (defined in other specs)

+ + + +

Color

+ +

The {{cssxref("<color>")}} value specifies the color of an element feature (e.g. it's background color), and is defined in the CSS Color Module.

+ +

Image

+ +

The {{cssxref("<image>")}} value specifies all the different types of image that can be used in CSS, and is defined in the CSS Image Values and Replaced Content Module.

+ +

Position

+ +

The {{cssxref("<position>")}} type defines 2D positioning of an object inside a positioning area, for example a background image inside a container. This type is interpreted as a  {{cssxref("background-position")}} and therefore specified in the CSS Backgrounds and Borders specification.

+ +

Functional notation

+ + + +

Functional notation is a type of value that can represent more complex types or invoke special processing by CSS. The syntax starts with the name of the function immediately followed by a left parenthesis ( followed by the argument(s) to the notation followed by a right parenthesis ). Functions can take multiple arguments, which are formatted similarly to a CSS property value.

+ +

White space is allowed, but optional inside the parentheses. (But see notes regarding whitespace within pages for min(), max() and clamp() functions.)

+ +

Some legacy functional notations such as rgba() use commas, but generally commas are only used to separate items in a list. If a comma is used to separate arguments, white space is optional before and after the comma.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Values")}}{{Spec2("CSS4 Values")}}Adds the vi, vb, ic, cap, lh and rlh units.
+ Adds the min(), max() and clamp() functional notation
+ Adds toggle()
{{SpecName("CSS3 Values")}}{{Spec2("CSS3 Values")}}Adds calc(), ch, rem, vw, vw, vmin, vmax, Q
{{SpecName("CSS4 Colors")}}{{Spec2("CSS4 Colors")}}Adds commaless syntaxes for the rgb(), rgba(), hsl(), and hsla() functions. Allows alpha values in rgb() and hsl(), turning rgba() and hsla() into (deprecated) aliases for them.
+ Adds color keyword rebeccapurple.
+ Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.
+ Adds hwb(), device-cmyk(), and color() functions.
{{SpecName("CSS3 Colors")}}{{Spec2("CSS3 Colors")}}Deprecates system-colors. Adds SVG colors. Adds the rgba(), hsl(), and hsla() functions.
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}} +

Adds element(), image(), image-set(), conic-gradient()

+
{{SpecName("CSS3 Images")}}{{Spec2("CSS3 Images")}}Initial definition of image.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition.
+ +

See also

+ + diff --git a/files/de/web/css/transform-function/index.html b/files/de/web/css/transform-function/index.html new file mode 100644 index 0000000000..7ad06db5c7 --- /dev/null +++ b/files/de/web/css/transform-function/index.html @@ -0,0 +1,295 @@ +--- +title: +slug: Web/CSS/transform-function +tags: + - CSS + - CSS Data Type + - CSS Transforms + - Data Type + - Layout + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/transform-function +--- +
{{CSSRef}}
+ +

The <transform-function> CSS data type represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the {{cssxref("transform")}} property.

+ +

Syntax

+ +

The <transform-function> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.

+ +

Matrix transformation

+ +
+
matrix()
+
Describes a homogeneous 2D transformation matrix.
+
matrix3d()
+
Describes a 3D transformation as a 4×4 homogeneous matrix.
+
+ +

Perspective

+ +
+
perspective()
+
Sets the distance between the user and the z=0 plane.
+
+ +

Rotation

+ +
+
rotate()
+
Rotates an element around a fixed point on the 2D plane.
+
rotate3d()
+
Rotates an element around a fixed axis in 3D space.
+
rotateX()
+
Rotates an element around the horizontal axis.
+
rotateY()
+
Rotates an element around the vertical axis.
+
rotateZ()
+
Rotates an element around the z-axis.
+
+ +

Scaling (resizing)

+ +
+
scale()
+
Scales an element up or down on the 2D plane.
+
scale3d()
+
Scales an element up or down in 3D space.
+
scaleX()
+
Scales an element up or down horizontally.
+
scaleY()
+
Scales an element up or down vertically.
+
scaleZ()
+
Scales an element up or down along the z-axis.
+
+ +

Skewing (distortion)

+ +
+
skew()
+
Skews an element on the 2D plane.
+
skewX()
+
Skews an element in the horizontal direction.
+
skewY()
+
Skews an element in the vertical direction.
+
+ +

Translation (moving)

+ +
+
translate()
+
Translates an element on the 2D plane.
+
translate3d()
+
Translates an element in 3D space.
+
translateX()
+
Translates an element horizontally.
+
translateY()
+
Translates an element vertically.
+
translateZ()
+
Translates an element along the z-axis.
+
+ +

Description

+ +

Various coordinate models can be used to describe an HTML element's size and shape, as well as any transformations applied to it. The most common is the Cartesian coordinate system, although homogeneous coordinates are also sometimes used.

+ +

Cartesian coordinates

+ +

+ +

In the Cartesian coordinate system, a two-dimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). This is represented by the vector notation (x, y).

+ +

In CSS (and most computer graphics), the origin (0, 0) represents the top-left corner of any element. Positive coordinates are down and to the right of the origin, while negative ones are up and to the left. Thus, a point that's 2 units to the right and 5 units down would be (2, 5), while a point 3 units to the left and 12 units up would be (-3, -12).

+ +

Transformation functions

+ +

Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2×2 matrix, like this:

+ +

ac bd

+ +

The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:

+ +

ac bd xy = ax+cy bx+dy

+ +

It is even possible to apply several transformations in a row:

+ +

a1 c1 b1 d1 a2 c2 b2 d2 = a1 a2 + c1 b2 a1 c2 + c1 d2 b1 a2 + d1 b2 b1 c2 + d1 d2

+ +

With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.

+ +

However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector (tx, ty) must be expressed separately, as two additional parameters.

+ +
+

Note: Though trickier than Cartesian coordinates, homogeneous coordinates in projective geometry lead to 3×3 transformation matrices, and can simply express translations as linear functions.

+
+ +

Examples

+ +

Transform function comparison

+ +

The following example provides a 3D cube created from DOM elements and transforms, and a select menu allowing you to choose different transform functions to transform the cube with, so you can compare the effects of the different types.

+ +

Choose one, and the transform is applied to the cube; after 2 seconds, the cube reverts back to its starting state. The cube's starting state is slightly rotated using transform3d(), to allow you to see the effect of all the transforms.

+ +

HTML

+ +
<main>
+  <section id="example-element">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+  </section>
+
+  <div class="select-form">
+    <label>Select a transform function</label>
+    <select>
+      <option selected>Choose a function</option>
+      <option>rotate(360deg)</option>
+      <option>rotateX(360deg)</option>
+      <option>rotateY(360deg)</option>
+      <option>rotateZ(360deg)</option>
+      <option>rotate3d(1, 1, 1, 90deg)</option>
+      <option>scale(1.5)</option>
+      <option>scaleX(1.5)</option>
+      <option>scaleY(1.5)</option>
+      <option>scaleZ(1.5)</option>
+      <option>scale3d(1, 1.5, 1.5)</option>
+      <option>skew(17deg, 13deg)</option>
+      <option>skewX(17deg)</option>
+      <option>skewY(17deg)</option>
+      <option>translate(100px, 100px)</option>
+      <option>translateX(100px)</option>
+      <option>translateY(100px)</option>
+      <option>translateZ(100px)</option>
+      <option>translate3d(50px, 50px, 50px)</option>
+      <option>perspective(200px)</option>
+      <option>matrix(1, 2, -1, 1, 80, 80)</option>
+      <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option>
+    </select>
+  </div>
+</main>
+ +

CSS

+ +
main {
+  width: 400px;
+  height: 200px;
+  padding: 50px;
+  background-image: linear-gradient(135deg, white, cyan, white);
+}
+
+#example-element {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  transition: transform 1.5s;
+  transform: rotate3d(1, 1, 1, 30deg);
+}
+
+.face {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  backface-visibility: inherit;
+  font-size: 60px;
+  color: #fff;
+}
+
+.front {
+    background: rgba(90,90,90,.7);
+    transform: translateZ(50px);
+}
+
+.back {
+    background: rgba(0,210,0,.7);
+    transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(210,0,0,.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0,0,210,.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(210,210,0,.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(210,0,210,.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+.select-form {
+  margin-top: 50px;
+}
+ +

JavaScript

+ +
const selectElem = document.querySelector('select');
+const example = document.querySelector('#example-element');
+
+selectElem.addEventListener('change', () => {
+  if(selectElem.value === 'Choose a function') {
+    return;
+  } else {
+    example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectElem.value}`;
+    setTimeout(function() {
+      example.style.transform = 'rotate3d(1, 1, 1, 30deg)';
+    }, 2000)
+  }
+})
+ +

Result

+ +

{{EmbedLiveSample('Transform_function_comparison', '100%', 300)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Transforms 2', '#transform-functions', '<transform-function>')}}{{Spec2('CSS Transforms 2')}}Added 3D transform functions.
{{SpecName('CSS3 Transforms', '#transform-functions', '<transform-function>')}}{{Spec2('CSS3 Transforms')}}Initial definition
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + 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..fc95451ba8 --- /dev/null +++ b/files/de/web/css/transform-function/translate3d()/index.html @@ -0,0 +1,147 @@ +--- +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/translatex/index.html b/files/de/web/css/transform-function/translatex/index.html new file mode 100644 index 0000000000..764fd63db3 --- /dev/null +++ b/files/de/web/css/transform-function/translatex/index.html @@ -0,0 +1,125 @@ +--- +title: translateX() +slug: Web/CSS/transform-function/translateX +tags: + - CSS + - CSS Funktion + - CSS Tranformation + - Funktion + - Referenz +translation_of: Web/CSS/transform-function/translateX +--- +
{{CSSRef}}
+ +

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

+ +

+ +
+

Hinweis: translateX(tx) ist dasselbe wie translate(tx, 0) oder translate3d(tx, 0, 0).

+
+ +

Syntax

+ +
/* <length-percentage> values */
+transform: translateX(200px);
+transform: translateX(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.

+ 		10t010001 10t010001 100t010000100001
[1 0 0 1 t 0]
+ +

Formale Syntax

+ +
translateX({{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: translateX(10px); /* Equal to translate(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")}}

+ +

Siehe auch

+ + 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..a364b79966 --- /dev/null +++ b/files/de/web/css/transform-function/translatey()/index.html @@ -0,0 +1,123 @@ +--- +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/translatez()/index.html b/files/de/web/css/transform-function/translatez()/index.html new file mode 100644 index 0000000000..27e86335fd --- /dev/null +++ b/files/de/web/css/transform-function/translatez()/index.html @@ -0,0 +1,128 @@ +--- +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/translate/index.html b/files/de/web/css/translate/index.html new file mode 100644 index 0000000000..ab89dae4c4 --- /dev/null +++ b/files/de/web/css/translate/index.html @@ -0,0 +1,136 @@ +--- +title: translate +slug: Web/CSS/translate +tags: + - CSS + - CSS Eigenschaft + - Experimentell + - Referenz + - Tranformation +translation_of: Web/CSS/translate +--- +
{{CSSRef}}
+ +

Mit der CSS-Eigenschaft translate CSS können Sie Transformationen einzeln und unabhängig von der Eigenschaft {{CSSxRef("transform")}} angeben. Dies entspricht eher der typischen Verwendung auf der Benutzeroberfläche und erspart es, sich die genaue Reihenfolge der Transformationsfunktionen zu merken, die im Transformationswert angegeben werden müssen.

+ +

Syntax

+ +
/* Standardwert */
+translate: none;
+
+/* Einzelwert */
+translate: 100px;
+translate: 50%;
+
+/* Zwei Werte */
+translate: 100px 200px;
+translate: 50% 105px;
+
+/* Drei Werte */
+translate: 50% 105px 5rem;
+
+ +

Values

+ +
+
Einzelwert {{cssxref("<length-percentage>")}}
+
Ein Einzelwert als {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, der eine 2D-Verschiebung angibt, die eine gleiche Verschiebung entlang der X- und Y-Achse spezifiziert. Äquivalent zu einer Funktion translate() (2D-Übersetzung) mit zwei angegebenen Werten.
+
Zwei Werte {{cssxref("<length-percentage>")}}
+
Zwei Werte als {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, wobei der erste Wert für die Verschiebung auf der X- und der Zweite auf der Y-Achse steht.
+
Drei Werte {{cssxref("<length-percentage>")}}
+
Zwei Werte als {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}} und ein dritter Wert im Format {{cssxref("<length>")}}, die die Verchiebung auf der X-, Y-, und Z-Achse spezifizieren. Entspricht der Funktion {{cssxref("translate3d()")}} (3D-Verschiebung).
+
none
+
Gibt an, dass keine Verschiebung angewendet werden soll.
+
+ +

Formale Definition

+ +

{{CSSInfo}}

+ +

Formale Syntax

+ +
{{CSSSyntax}}
+ +

Beispiel

+ +

HTML

+ +
<div>
+  <p class="translate">Translation</p>
+</div>
+ +

CSS

+ +
* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+div {
+  width: 150px;
+  margin: 0 auto;
+}
+
+p {
+  padding: 10px 5px;
+  border: 3px solid black;
+  border-radius: 20px;
+  width: 150px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.translate {
+  transition: translate 1s;
+}
+
+div:hover .translate {
+  translate: 200px 50px;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Examples')}}

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}{{Spec2('CSS Transforms 2')}}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ + + +

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

+ +

See also

+ + + +

Note: skew is not an independent transform value

-- cgit v1.2.3-54-g00ecf