mozilla

Version 501435 von <angle>

  • Adressname der Version: Web/CSS/angle
  • Titel der Version: <angle>
  • ID der Version: 501435
  • Erstellt:
  • Autor: SJW
  • Aktuelle Version? Nein
  • Kommentar

Inhalt der Version

{{ CSSRef() }}

Übersicht

Der CSS Datentyp <angle> steht für einen Winkel. Dieser kann positiv (rechts) oder negativ (links) sein. Ein Winkel besteht immer aus einer {{ Xref_cssnumber() }}, gefolgt von einer Einheit (deg, grad, rad or turn). Wie auch bei anderen Werten darf dazwischen kein Leerschlag sein.

Für statische Elemente können mehrere Schreibweisen zum selben Ergebniss führen (bspw. 90deg und -270deg oder 1turn und 4turn), bei dynamischen Eigenschaften wie zum Beispiel {{ cssxref("transition") }} kann die Schreibweise jedoch eine Auswirkung auf den Effekt haben.

Die folgenden Einheiten können Verwendet werden:

deg
definiert einen Winkel in Grad. Ein voller Kreis hat 360deg.
grad
definiert einen Winkel in Gon. Ein voller Kreis hat 400grad.
Achtung: Nicht zu verwechseln mit Grad (siehe deg).
rad
definiert einen Winkel in Radianten.  Ein voller Kries hat 2π Radianten, das entspricht etwa 6.2832rad. 1rad entspricht 180/π Grad.
turn
definiert einen Winkel in der Anzahl Umdrehungen. Ein voller Kreis besteht aus 1turn.

Alle Einheiten können auch den Wert 0 (0deg, 0grad, 0rad oder 0turn) annehmen, welcher unabhängig der Einheit immer dasselbe Ergebnis erzielt. Ein Wert ohne angabe einer Einheit (0)  ist nicht zulässig.

Beispiele

Angle90.png

Ein Rechter Winkel: 90deg = 100grad = 0.25turn 1.5708rad

Angle180.png Ein flacher Winkel: 180deg = 200grad = 0.5turn 3.1416rad
AngleMinus90.png Ein Rechter Winkel (nach Links): -90deg = -100grad = -0.25turn -1.5708rad
Angle0.png

Ein Nullwinkel: 0deg = 0grad = 0turn = 0rad

Hinweis: 0 ist kein gültiger Wert.

Spezifikation

Spezifikation Status Anmerkung
{{ SpecName('CSS3 Values', '#angles', '<angle>') }} {{ Spec2('CSS3 Values') }}  

Browser Kompatibilität

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2 (528.17) 3.6 (1.9.2) 9.0 {{ CompatNo }} 4.0 (528.17)
turn unit {{ CompatNo }} 13.0 9.0 {{ CompatNo }} {{ CompatNo }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown }} {{ CompatVersionUnknown }} {{ CompatUnknown }} {{ CompatNo }} {{ CompatUnknown }}
turn unit {{ CompatNo }} 13.0 {{ CompatUnknown }} {{ CompatNo }} {{ CompatNo }}

Siehe auch

  • CSS Data Types : {{ CSSDataTypes() }}

 

Quelltext der Version

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Übersicht</h2>
<p>Der&nbsp;<a href="/de/CSS" title="CSS">CSS</a> Datentyp <code>&lt;angle&gt;</code> steht für einen Winkel. Dieser kann positiv (rechts) oder negativ (links) sein. Ein Winkel besteht immer aus einer {{ Xref_cssnumber() }}, gefolgt von einer Einheit (<code>deg</code>, <code>grad</code>, <code>rad</code> or <code>turn</code>). Wie auch bei anderen Werten darf dazwischen kein Leerschlag sein.</p>
<p>Für statische Elemente können mehrere Schreibweisen zum selben Ergebniss führen (bspw. <code>90deg</code> und <code>-270deg</code> oder <code>1turn</code> und <code>4turn</code>), bei dynamischen Eigenschaften wie zum Beispiel {{ cssxref("transition") }} kann die Schreibweise jedoch eine Auswirkung auf den Effekt haben.</p>
<p>Die folgenden Einheiten können Verwendet werden:</p>
<dl>
 <dt>
  <code><a id="deg">deg</a></code></dt>
 <dd>
  definiert einen Winkel in <a class="external" href="https://de.wikipedia.org/wiki/Grad_%28Winkel%29" title="http://en.wikipedia.org/wiki/Degree_%28angle%29">Grad</a>. Ein voller Kreis hat <code>360deg</code>.</dd>
 <dt>
  <code><a id="grad">grad</a></code></dt>
 <dd>
  definiert einen Winkel in <a class="external" href="https://de.wikipedia.org/wiki/Gon" title="http://en.wikipedia.org/wiki/Gradian">Gon</a>. Ein voller Kreis hat <code>400grad</code>.
  <div class="warning">
   <strong>Achtung:</strong> Nicht zu verwechseln mit <a href="grad">Grad (siehe <code>deg</code>)</a>.</div>
 </dd>
 <dt>
  <code><a id="rad">rad</a></code></dt>
 <dd>
  definiert einen Winkel in <a class="external" href="https://de.wikipedia.org/wiki/Radiant_%28Einheit%29" title="http://en.wikipedia.org/wiki/Radian">Radiant</a>en.&nbsp; Ein voller Kries hat 2π Radianten, das entspricht etwa <code>6.2832rad</code>. <code>1rad</code> entspricht 180/π Grad.</dd>
 <dt>
  <code><a id="turn">turn</a></code></dt>
 <dd>
  definiert einen Winkel in der Anzahl Umdrehungen. Ein voller Kreis besteht aus <code>1turn</code>.</dd>
</dl>
<p>Alle Einheiten können auch den Wert <code>0</code> (<code>0deg</code>, <code>0grad</code>, <code>0rad</code> oder <code>0turn) </code>annehmen, welcher unabhängig der Einheit immer dasselbe Ergebnis erzielt. Ein Wert ohne angabe einer Einheit (<code>0</code>)&nbsp; ist nicht zulässig.</p>
<h2 id="Specifications" name="Specifications">Beispiele</h2>
<table border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
 <tbody>
  <tr>
   <td><img alt="Angle90.png" class="internal default" src="/@api/deki/files/5704/=Angle90.png" style="" /></td>
   <td>
    <p>Ein Rechter Winkel: <code>90deg = 100grad = 0.25turn</code> <code style="white-space: nowrap;">≈</code><code> 1.5708rad</code></p>
   </td>
  </tr>
  <tr>
   <td><img alt="Angle180.png" class="internal default" src="/@api/deki/files/5706/=Angle180.png" /></td>
   <td>Ein flacher Winkel: <code>180deg = 200grad = 0.5turn</code><code> </code><code style="white-space: nowrap;">≈</code><code> 3.1416rad</code></td>
  </tr>
  <tr>
   <td><img alt="AngleMinus90.png" class="internal default" src="/@api/deki/files/5707/=AngleMinus90.png" /></td>
   <td>Ein Rechter Winkel (nach Links): <code>-90deg = -100grad = -0.25turn</code> <code style="white-space: nowrap;">≈</code><code> -1.5708rad</code></td>
  </tr>
  <tr>
   <td><img alt="Angle0.png" class="internal default" src="/@api/deki/files/5708/=Angle0.png" /></td>
   <td>
    <p>Ein Nullwinkel: <code>0deg = 0grad = 0turn</code><code> </code><code style="white-space: nowrap;">=</code><code> 0rad</code></p>
    <div class="note">
     <strong>Hinweis:</strong> <code>0</code> ist kein gültiger Wert.</div>
   </td>
  </tr>
 </tbody>
</table>
<h2 id="Specifications" name="Specifications">Spezifikation</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Anmerkung</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Values', '#angles', '&lt;angle&gt;') }}</td>
   <td>{{ Spec2('CSS3 Values') }}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility">Browser Kompatibilität</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari (WebKit)</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>2 (528.17)</td>
    <td>3.6 (1.9.2)</td>
    <td>9.0</td>
    <td>{{ CompatNo }}</td>
    <td>4.0 (528.17)</td>
   </tr>
   <tr>
    <td><code>turn</code> unit</td>
    <td>{{ CompatNo }}</td>
    <td>13.0</td>
    <td>9.0</td>
    <td>{{ CompatNo }}</td>
    <td>{{ CompatNo }}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE&nbsp;Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{ CompatUnknown }}</td>
    <td>{{ CompatVersionUnknown }}</td>
    <td>{{ CompatUnknown }}</td>
    <td>{{ CompatNo }}</td>
    <td>{{ CompatUnknown }}</td>
   </tr>
   <tr>
    <td><code>turn</code> unit</td>
    <td>{{ CompatNo }}</td>
    <td>13.0</td>
    <td>{{ CompatUnknown }}</td>
    <td>{{ CompatNo }}</td>
    <td>{{ CompatNo }}</td>
   </tr>
  </tbody>
 </table>
</div>
<div class="noinclude">
 <h2 id="See_also">Siehe auch</h2>
 <ul>
  <li>CSS Data Types : {{ CSSDataTypes() }}</li>
 </ul>
</div>
<p>&nbsp;</p>
Zu dieser Version zurücksetzen