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/translate/index.html | 136 ++++++++++++++++++++++++++++++++++ 1 file changed, 136 insertions(+) create mode 100644 files/de/web/css/translate/index.html (limited to 'files/de/web/css/translate') 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