---
title: azimuth
slug: Web/CSS/azimuth
tags:
  - CSS
  - Obsolete
  - Propriété
  - Reference
translation_of: Archive/Web/CSS/azimuth
---
<div>{{CSSRef}}{{obsolete_header}}{{outdated}}</div>

<p>Utilisée avec la propriété {{cssxref("elevation")}}, <strong><code>azimuth</code></strong> permet de positionner différentes sources audio dans l'espace pour une présentation auditive. Cela permet de séparer les voix de façons naturelles, qui pourront donc provenir de différents emplacements. Une sortie <em>stereo</em> permettra d'obtenir un son avec des sources situées sur deux dimensions, des écouteurs binauriculaires permettent d'obtenir un son tri-dimensionnel.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt>angle</dt>
 <dd>Un angle indiquant la position de la source dans l'intervalle <code>-360deg</code> - <code>360deg</code>. La valeur <code>0deg</code> (la valeur par défaut) est dirigée vers le centre, <code>90deg</code> vers la droite, <code>180deg</code> vers l'arrière et <code>270deg</code> ou <code>-90deg</code> vers la gauche.</dd>
</dl>

<p><img alt="Image:Azimuth.png" src="/@api/deki/files/37/=Azimuth.png"></p>

<h4 id="Mots-clés_pour_cette_propriété">Mots-clés pour cette propriété</h4>

<ul>
 <li><strong><code>left-side</code></strong> : Synonyme de <code>270deg</code>.</li>
 <li><strong><code>left-side behind</code></strong> : Synonyme de <code>270deg</code>.</li>
 <li><strong><code>far-left</code></strong> : Synonyme de <code>300deg</code>.</li>
 <li><strong><code>far-left behind</code></strong> : Synonyme de <code>240deg</code>.</li>
 <li><strong><code>left</code></strong> : Synonyme de <code>320deg</code>.</li>
 <li><strong><code>left behind </code></strong>: Synonyme de <code>220deg</code>.</li>
 <li><strong><code>center-left</code></strong> : Synonyme de <code>340deg</code>.</li>
 <li><strong><code>center-left behind</code></strong> : Synonyme de <code>200deg</code>.</li>
 <li><strong><code>center</code></strong> : Synonyme de <code>0deg</code>.</li>
 <li><strong><code>center behind </code></strong>: Synonyme de <code>180deg</code>.</li>
 <li><strong><code>center-right</code></strong> : Synonyme de <code>20deg</code>.</li>
 <li><strong><code>center-right behind</code></strong> : Synonyme de <code>160deg</code>.</li>
 <li><strong><code>right</code></strong> : Synonyme de <code>40deg</code>.</li>
 <li><strong><code>right behind</code></strong> : Synonyme de <code>140deg</code>.</li>
 <li><strong><code>far-right</code></strong> : Synonyme de <code>60deg</code>.</li>
 <li><strong><code>far-right behind</code></strong> : Synonyme de <code>120deg</code>.</li>
 <li><strong><code>right-side</code></strong> : Synonyme de <code>90deg</code>.</li>
 <li><strong><code>right-side behind</code></strong> : Synonyme de <code>90deg</code>.</li>
 <li><strong><code>behind</code></strong> : Synonyme de <code>180deg</code>. Also used as a modifier for other positional keyword values, as above.</li>
 <li><strong><code>leftwards </code></strong>: Moves the sound counter-clockwise by 20 degrees, relative to the current angle.</li>
 <li><strong><code>rightwards </code></strong>: Moves the sound clockwise by 20 degrees, relative to the current angle.</li>
</ul>

<h2 id="Exemples">Exemples</h2>

<pre class="brush:css;">h1 {
  azimuth: 30deg;
}

td.a {
  azimuth: far-right;
}

#12 {
  azimuth: behind far-right;  /* 120deg */
}

p.comment {
  azimuth: behind;  /* 180deg */
}
</pre>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS2.1', 'aural.html#spatial-props', 'azimuth')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>

<p>{{Compat("css.properties.azimuth")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{cssxref("elevation")}}</li>
</ul>