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 --- files/de/web/css/transform/index.html | 199 +++++++++++++++++++++------------- 1 file changed, 123 insertions(+), 76 deletions(-) (limited to 'files/de/web/css/transform/index.html') diff --git a/files/de/web/css/transform/index.html b/files/de/web/css/transform/index.html index 3e001247e1..0456661dbb 100644 --- a/files/de/web/css/transform/index.html +++ b/files/de/web/css/transform/index.html @@ -2,122 +2,169 @@ title: transform slug: Web/CSS/transform tags: - - BrauchtBeispiele - - BrauchtBrowserKompatibilität + - CSS - CSS-Eigenschaft - Referenz + - Transfomation + - 'recipe:css-property' translation_of: Web/CSS/transform --- -

   {{CSRef}} {{SeheCompatTable}}

+
{{CSSRef}}
-

Mit der Eigenschaft "CSS übersetzen" können Sie Übersetzungstransformationen einzeln und unabhängig von der Eigenschaft
- {{CSSxRef ("transform")}} angeben. Dadurch wird die typische Verwendung der Benutzeroberfläche besser abgebildet, und Sie müssen sich nicht die genaue Reihenfolge der Transformationsfunktionen merken, die im Transformationswerte angegeben werden müssen.

+

Mit der CSS-Eigenschaft transform können Sie ein Element drehen, skalieren, schräg stellen oder übersetzen. Sie modifiziert den Koordinatenraum des CSS visuellen Formatierungsmodells.

-

Syntax

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

/ * Schlüsselwortwerte * / translate: none; / * Einzelwerte * / translate: 100px; übersetzen: 50%; / * Zwei Werte * / translate: 100px 200px; übersetzen: 50% 105px; / * Drei Werte * / übersetzen: 50% 105px 5rem;

-


- Values

-

<p> {{HTMLSidebar ("Global_attributes")}} </p>

+

Wenn die Eigenschaft einen anderen Wert als none hat, wird ein Stapelkontext erstellt. In diesem Fall fungiert das Element als ein enthaltender Block für alle position: fixed; oder position: absolute; Elemente, die es enthält.

-

  <p> <span class = "seoSummary"> Das <strong> translate </strong> <a href="/en-US/docs/Web/HTML/Global_attributes"> globale Attribut </a> ist ein aufgezähltes Attribut, das wird verwendet, um anzugeben, ob die <em> übersetzbaren Attributwerte </em> eines Elements und die untergeordneten Knoten {{domxref ("Text")}} beim Lokalisieren der Seite übersetzt werden sollen oder ob sie unverändert bleiben sollen. </span> Es kann folgende Werte annehmen:
- </p>

+
+

Nur transformierbare Elemente können transformiert werden. Das heißt, alle Elemente, deren Layout durch das CSS-Box-Modell geregelt wird, mit Ausnahme von: nicht ersetzten Inline-Boxen, Tabellen-Spalten-Boxen und Tabellen-Spalten-Gruppen-Boxen.

+
-

<ul>
- <li> leere Zeichenfolge oder <code> "yes" </code>, die angibt, dass das Element übersetzt werden soll, wenn die Seite lokalisiert wird. </i>
- <li> <code> "no" </code> gibt an, dass das Element nicht übersetzt werden darf. </li>
-   </ul>

+

Syntax

-

  <p> Obwohl nicht alle Browser dieses Attribut erkennen, wird es von automatischen Übersetzungssystemen wie Google Translate und möglicherweise auch von Tools, die von menschlichen Übersetzern verwendet werden, respektiert. Aus diesem Grund ist es wichtig, dass Webautoren dieses Attribut verwenden, um Inhalte zu markieren, die nicht übersetzt werden sollen. </P>

+
/* Keyword values */
+transform: none;
 
-
  <h2 id = "Specifications"> Spezifikationen </h2>

+/* Function values */
+transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
+transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+transform: perspective(17px);
+transform: rotate(0.5turn);
+transform: rotate3d(1, 2.0, 3.0, 10deg);
+transform: rotateX(10deg);
+transform: rotateY(10deg);
+transform: rotateZ(10deg);
+transform: translate(12px, 50%);
+transform: translate3d(12px, 50%, 3em);
+transform: translateX(2em);
+transform: translateY(3in);
+transform: translateZ(2px);
+transform: scale(2, 0.5);
+transform: scale3d(2.5, 1.2, 0.3);
+transform: scaleX(2);
+transform: scaleY(0.5);
+transform: scaleZ(0.3);
+transform: skew(30deg, 20deg);
+transform: skewX(30deg);
+transform: skewY(1.07rad);
 
-
  <table class = "standard-table">

- <tbody>

- <tr>

- <th scope = "col"> Spezifikation </th>

- <th scope = "col"> Status </th>

- <th scope = "col"> Kommentar </th>

- </tr>

- <tr>

- <td> {{SpecName ('HTML WHATWG', "dom.html # attr-translate", "translate")}} </td>

- <td> {{Spec2 ('HTML WHATWG')}} </td>

- <td> Keine Änderung gegenüber dem letzten Snapshot {{SpecName ('HTML5.1')}} </td>

- </tr>

- <tr>

- <td> {{SpecName ('HTML5.1', ​​"dom.html # the-translate-attribute", "translate")}} </td>

- <td> {{Spec2 ('HTML5.1')}} </td>

- <td> Momentaufnahme von {{SpecName ('HTML WHATWG')}}, ursprüngliche Definition </td>

- </tr>

- </tbody>

-   </table>

+/* Multiple function values */
+transform: translateX(10px) rotate(10deg) translateY(5px);
+transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
 
-
  <h2 id = "Browser_compatibility"> Browserkompatibilität </h2>

+/* Global values */
+transform: inherit;
+transform: initial;
+transform: unset;
+
-

  <div class = "hidden"> Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, lesen Sie <a href="https://github.com/mdn/browser-compat-data"> https://github.com/mdn/browser-compat- Daten </a> und senden Sie uns eine Pull-Anfrage. </div>

+

Die Eigenschaft transform kann entweder als Schlüsselwortwert none oder mehrere<transform-function> -Werte angegeben werden.

-

  <p> {{Compat ("html.global_attributes.translate")}} </p>

+
+

Hinweis: Wenn {{cssxref("transform-function/perspective", "perspective()")}} einer von mehreren Funktionswerten ist, muss er zuerst aufgeführt werden.

+
-

  <h2 id = "See_also"> Siehe auch </h2>

+

Werte

-

  <ul>
- <li> Alle <a href="/en-US/docs/Web/HTML/Global_attributes"> globalen Attribute </a>. </li>
- <li> Die Eigenschaft {{domxref ("HTMLElement.translate")}}, die dieses Attribut widerspiegelt. </li>
- <li> <a href="https://www.w3.org/International/questions/qa-translate-flag"> Verwenden des HTML-Übersetzungsattributs </a> </li>
-   </ul>

+
+
{{cssxref("<transform-function>")}}
+
Eine oder mehrere der CSS-Transformationsfunktionen, die angewendet werden sollen. Die Transformationsfunktionen werden in der Reihenfolge von links nach rechts multipliziert, was bedeutet, dass zusammengesetzte Transformationen effektiv in der Reihenfolge von rechts nach links angewendet werden.
+
none
+
Specifies that no transform should be applied.
+
-


- Formal syntax

+

Bedenken hinsichtlich der Zugänglichkeit

-

{{CSSSyntax}}

+

Skalierungs-/Zoom-Animationen sind problematisch für die Barrierefreiheit, da sie ein häufiger Auslöser für bestimmte Arten von Migräne sind. Wenn Sie solche Animationen auf Ihrer Website einbinden müssen, sollten Sie ein Steuerelement bereitstellen, mit dem Benutzer Animationen abschalten können, vorzugsweise site-wide.

-

Examples

+

Ziehen Sie außerdem in Erwägung, die Medienfunktion {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} zu nutzen - verwenden Sie sie, um eine Media Queries zu schreiben, die Animationen ausschaltet, wenn der Benutzer in seinen Systemeinstellungen reduzierte Animationen angegeben hat.

-

HTML

+

Erfahren Sie mehr:

-

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

+ -

CSS

+

Formale Definition

-

* { 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; }

+

{{CSSInfo}}

-

Result

+

Formale Syntax

-

{{EmbedLiveSample
- ('Examples')}}

+
{{csssyntax}}
-

Specifications

+

Beispiel

-

SpecificationStatusComment{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}{{Spec2('CSS Transforms 2')}}Initial definition.

+

Verschieben und Drehen eines Elements

-

{{CSSInfo}}

+

HTML

+ +
<div>Transformed element</div>
+ +

CSS

+ +
div {
+  border: solid red;
+  transform: translate(30px, 20px) rotate(20deg);
+  width: 140px;
+  height: 60px;
+}
-

Browser-Kompatibilität

+

Ergebnis

-

Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, lesen Sie bitte https://github.com/mdn/browser-compat-data und senden Sie uns eine Pull-Anfrage.
- {{Compat("css.properties.translate")}}

+

{{EmbedLiveSample("Translating_and_rotating_an_element", "400", "160")}}

-

 Siehe auch

+

Mehr Beispiele

-

{{cssxref ('scale')}}

+

Weitere Beispiele finden Sie unter Verwendung von CSS-Transformationen und {{cssxref("<transform-function>")}}.

-

{{cssxref ('rotate')}}

+ -

{{cssxref ('transform')}}

+

Spezifikationen

-

hinweis: skew ist kein unabhängiger Transformationswert

+ + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Zusätzliche 3D Transformationsfunctionen.
{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}{{Spec2('CSS3 Transforms')}}Ursprünglich Definition.
-


- Übersetzung in Deutsch:

+

Browser-Kompatibilität

-

Benötigen Sie Hilfe? • Leitfaden für Redakteure • Stilleitfaden

+ -

Sie haben einen Entwurf vom: 21.10.2019 16:52:53.

+

{{Compat("css.properties.transform")}}

-

Entwurf automatisch gespeichert: 21.10.2019 16:55:27

+

Siehe auch

-

 

+ -- cgit v1.2.3-54-g00ecf