transform

   {{CSRef}} {{SeheCompatTable}}

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.

Syntax

/ * 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>

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

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

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

  <h2 id = "Specifications"> Spezifikationen </h2>

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

  <h2 id = "Browser_compatibility"> Browserkompatibilität </h2>

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

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

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

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


Formal syntax

{{CSSSyntax}}

Examples

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')}}

Specifications

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

{{CSSInfo}}

Browser-Kompatibilität

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")}}

 Siehe auch

{{cssxref ('scale')}}

{{cssxref ('rotate')}}

{{cssxref ('transform')}}

hinweis: skew ist kein unabhängiger Transformationswert


Übersetzung in Deutsch:

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

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

Entwurf automatisch gespeichert: 21.10.2019 16:55:27