path: root/files/fr/web/css/perspective-origin/index.html

---
title: perspective-origin
slug: Web/CSS/perspective-origin
tags:
  - CSS
  - Propriété
  - Reference
  - Transformations CSS
translation_of: Web/CSS/perspective-origin
---
<div>{{CSSRef}}</div>

<p>La propriété <strong><code>perspective-origin</code></strong> détermine la poisition depuis laquelle le spectateur regarde le document. Elle est utilisée comme point de fuite par la propriété {{cssxref("perspective")}}.</p>

<div>{{EmbedInteractiveExample("pages/css/perspective-origin.html")}}</div>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<p>Les propriétés <code>perspective-origin</code> et {{cssxref("perspective")}} sont à rattacher à l'élément parent de l'élément qu'on veut placer dans un espace 3D. En revanche, la fonction <code><a href="/fr/docs/Web/CSS/transform-function/perspective">perspective()</a></code> s'applique à même l'élément qu'on veut placer en 3D.</p>

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

<pre class="brush:css  no-line-numbers">/* Syntaxe avec une valeur */
perspective-origin: x-position;

/* Syntaxe avec deux valeurs */
perspective-origin: x-position y-position;

/* Lorsque x-position et y-position sont des mots-clés */
/* on peut aussi avoir la forme suivante valide        */
perspective-origin: y-position x-position;

/* Valeurs globales */
perspective-origin: inherit;
perspective-origin: initial;
perspective-origin: unset;
</pre>

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

<dl>
 <dt><em>x-position</em></dt>
 <dd>Indique l'abscisse de la position du point de fuite. La valeur peut être :
 <ul>
  <li>De type {{cssxref("&lt;length-percentage&gt;")}} : la position est indiquée comme une longueur absolue ou relativement à la largeur de l'élément. La valeur peut être négative.</li>
  <li><code>left</code> : un mot-clé qui est un alias pour indiquer une longueur nulle.</li>
  <li><code>center</code> : un mot-clé qui est un alias pour indiquer une valeur de pourcentage de <code>50%</code>.</li>
  <li><code>right</code> : un mot-clé qui est un alias pour indiquer un pourcentage de <code>100%</code>.</li>
 </ul>
 </dd>
 <dt><em>y-position</em></dt>
 <dd>Indique l'ordonnée de la position du point de fuite. La valeur peut être :
 <ul>
  <li>De type {{cssxref("&lt;length-percentage&gt;")}} : la position est indiquée comme une longueur absolue ou relativement à la hauteur de l'élément. La valeur peut être négative.</li>
  <li>De type {{cssxref("&lt;length&gt;")}} : la position est indiquée avec une valeur de longueur. La valeur peut être négative.</li>
  <li><code>top</code> : un mot-clé qui est un alias pour indiquer une longueur nulle.</li>
  <li><code>center</code> : un mot-clé qui est un alias pour indiquer une valeur de pourcentage de <code>50%</code>.</li>
  <li><code>bottom</code> : un mot-clé qui est un alias pour indiquer un pourcentage de <code>100%</code>.</li>
 </ul>
 </dd>
</dl>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

{{csssyntax}}

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

<h3 id="Cubes_avec_des_valeurs_communes_pour_perspective-origin">Cubes avec des valeurs communes pour <code>perspective-origin</code></h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;section&gt;
&lt;figure&gt;
  &lt;caption&gt;&lt;code&gt;perspective-origin: top left;&lt;/code&gt;&lt;/caption&gt;
    &lt;div class="container"&gt;
    &lt;div class="cube potl"&gt;
      &lt;div class="face front"&gt;1&lt;/div&gt;
      &lt;div class="face back"&gt;2&lt;/div&gt;
      &lt;div class="face right"&gt;3&lt;/div&gt;
      &lt;div class="face left"&gt;4&lt;/div&gt;
      &lt;div class="face top"&gt;5&lt;/div&gt;
      &lt;div class="face bottom"&gt;6&lt;/div&gt;
    &lt;/div&gt;
&lt;/figure&gt;

&lt;figure&gt;
  &lt;caption&gt;&lt;code&gt;perspective-origin: top;&lt;/code&gt;&lt;/caption&gt;
   &lt;div class="container"&gt;
    &lt;div class="cube potm"&gt;
      &lt;div class="face front"&gt;1&lt;/div&gt;
      &lt;div class="face back"&gt;2&lt;/div&gt;
      &lt;div class="face right"&gt;3&lt;/div&gt;
      &lt;div class="face left"&gt;4&lt;/div&gt;
      &lt;div class="face top"&gt;5&lt;/div&gt;
      &lt;div class="face bottom"&gt;6&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/figure&gt;

&lt;figure&gt;
  &lt;caption&gt;&lt;code&gt;perspective-origin: top right;&lt;/code&gt;&lt;/caption&gt;
  &lt;div class="container"&gt;
    &lt;div class="cube potr"&gt;
      &lt;div class="face front"&gt;1&lt;/div&gt;
      &lt;div class="face back"&gt;2&lt;/div&gt;
      &lt;div class="face right"&gt;3&lt;/div&gt;
      &lt;div class="face left"&gt;4&lt;/div&gt;
      &lt;div class="face top"&gt;5&lt;/div&gt;
      &lt;div class="face bottom"&gt;6&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/figure&gt;

&lt;figure&gt;
  &lt;caption&gt;&lt;code&gt;perspective-origin: left;&lt;/code&gt;&lt;/caption&gt;
  &lt;div class="container"&gt;
    &lt;div class="cube poml"&gt;
      &lt;div class="face front"&gt;1&lt;/div&gt;
      &lt;div class="face back"&gt;2&lt;/div&gt;
      &lt;div class="face right"&gt;3&lt;/div&gt;
      &lt;div class="face left"&gt;4&lt;/div&gt;
      &lt;div class="face top"&gt;5&lt;/div&gt;
      &lt;div class="face bottom"&gt;6&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/figure&gt;

&lt;figure&gt;
  &lt;caption&gt;&lt;code&gt;perspective-origin: 50% 50%;&lt;/code&gt;&lt;/caption&gt;
  &lt;div class="container"&gt;
    &lt;div class="cube pomm"&gt;
      &lt;div class="face front"&gt;1&lt;/div&gt;
      &lt;div class="face back"&gt;2&lt;/div&gt;
      &lt;div class="face right"&gt;3&lt;/div&gt;
      &lt;div class="face left"&gt;4&lt;/div&gt;
      &lt;div class="face top"&gt;5&lt;/div&gt;
      &lt;div class="face bottom"&gt;6&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/figure&gt;

&lt;figure&gt;
  &lt;caption&gt;&lt;code&gt;perspective-origin: right;&lt;/code&gt;&lt;/caption&gt;
  &lt;div class="container"&gt;
    &lt;div class="cube pomr"&gt;
      &lt;div class="face front"&gt;1&lt;/div&gt;
      &lt;div class="face back"&gt;2&lt;/div&gt;
      &lt;div class="face right"&gt;3&lt;/div&gt;
      &lt;div class="face left"&gt;4&lt;/div&gt;
      &lt;div class="face top"&gt;5&lt;/div&gt;
      &lt;div class="face bottom"&gt;6&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/figure&gt;

&lt;figure&gt;
  &lt;caption&gt;&lt;code&gt;perspective-origin: bottom left;&lt;/code&gt;&lt;/caption&gt;
  &lt;div class="container"&gt;
    &lt;div class="cube pobl"&gt;
      &lt;div class="face front"&gt;1&lt;/div&gt;
      &lt;div class="face back"&gt;2&lt;/div&gt;
      &lt;div class="face right"&gt;3&lt;/div&gt;
      &lt;div class="face left"&gt;4&lt;/div&gt;
      &lt;div class="face top"&gt;5&lt;/div&gt;
      &lt;div class="face bottom"&gt;6&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/figure&gt;

&lt;figure&gt;
  &lt;caption&gt;&lt;code&gt;perspective-origin: bottom;&lt;/code&gt;&lt;/caption&gt;
  &lt;div class="container"&gt;
    &lt;div class="cube pobm"&gt;
      &lt;div class="face front"&gt;1&lt;/div&gt;
      &lt;div class="face back"&gt;2&lt;/div&gt;
      &lt;div class="face right"&gt;3&lt;/div&gt;
      &lt;div class="face left"&gt;4&lt;/div&gt;
      &lt;div class="face top"&gt;5&lt;/div&gt;
      &lt;div class="face bottom"&gt;6&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/figure&gt;

&lt;figure&gt;
  &lt;caption&gt;&lt;code&gt;perspective-origin: bottom right;&lt;/code&gt;&lt;/caption&gt;
  &lt;div class="container"&gt;
    &lt;div class="cube pobr"&gt;
      &lt;div class="face front"&gt;1&lt;/div&gt;
      &lt;div class="face back"&gt;2&lt;/div&gt;
      &lt;div class="face right"&gt;3&lt;/div&gt;
      &lt;div class="face left"&gt;4&lt;/div&gt;
      &lt;div class="face top"&gt;5&lt;/div&gt;
      &lt;div class="face bottom"&gt;6&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/figure&gt;

&lt;figure&gt;
  &lt;caption&gt;&lt;code&gt;perspective-origin: -200% -200%;&lt;/code&gt;&lt;/caption&gt;
  &lt;div class="container"&gt;
    &lt;div class="cube po200200neg"&gt;
      &lt;div class="face front"&gt;1&lt;/div&gt;
      &lt;div class="face back"&gt;2&lt;/div&gt;
      &lt;div class="face right"&gt;3&lt;/div&gt;
      &lt;div class="face left"&gt;4&lt;/div&gt;
      &lt;div class="face top"&gt;5&lt;/div&gt;
      &lt;div class="face bottom"&gt;6&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/figure&gt;

&lt;figure&gt;
  &lt;caption&gt;&lt;code&gt;perspective-origin: 200% 200%;&lt;/code&gt;&lt;/caption&gt;
  &lt;div class="container"&gt;
    &lt;div class="cube po200200pos"&gt;
      &lt;div class="face front"&gt;1&lt;/div&gt;
      &lt;div class="face back"&gt;2&lt;/div&gt;
      &lt;div class="face right"&gt;3&lt;/div&gt;
      &lt;div class="face left"&gt;4&lt;/div&gt;
      &lt;div class="face top"&gt;5&lt;/div&gt;
      &lt;div class="face bottom"&gt;6&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/figure&gt;

&lt;figure&gt;
  &lt;caption&gt;&lt;code&gt;perspective-origin: 200% -200%;&lt;/code&gt;&lt;/caption&gt;
  &lt;div class="container"&gt;
    &lt;div class="cube po200200"&gt;
      &lt;div class="face front"&gt;1&lt;/div&gt;
      &lt;div class="face back"&gt;2&lt;/div&gt;
      &lt;div class="face right"&gt;3&lt;/div&gt;
      &lt;div class="face left"&gt;4&lt;/div&gt;
      &lt;div class="face top"&gt;5&lt;/div&gt;
      &lt;div class="face bottom"&gt;6&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/figure&gt;

&lt;/section&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">/* Valeurs de perspective-origin (uniques pour chaque exemple) */
.potl {
  perspective-origin: top left;
}
.potm {
  perspective-origin: top;
}
.potr {
  perspective-origin: top right;
}
.poml {
  perspective-origin: left;
}
.pomm {
  perspective-origin: 50% 50%;
}
.pomr {
  perspective-origin: right;
}
.pobl {
  perspective-origin: bottom left;
}
.pobm {
  perspective-origin: bottom;
}
.pobr {
  perspective-origin: bottom right;
}
.po200200neg {
  perspective-origin: -200% -200%;
}
.po200200pos {
  perspective-origin: 200% 200%;
}
.po200200 {
  perspective-origin: 200% -200%;
}

/* On définit le conteneur, le cube et une face générique */
.container {
  width: 100px;
  height: 100px;
  margin: 24px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  perspective: 300px;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/* On définit chaque face */
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
}
.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}
.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}
.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}
.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}
.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

/* On améliore la disposition */
section {
  background-color: #EEE;
  padding: 10px;
  font-family: sans-serif;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}</pre>

<h4 id="Résultat">Résultat</h4>

<p>{{EmbedLiveSample('Cubes_avec_des_valeurs_communes_pour_perspective-origin', 620, 800)}}</p>

<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('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}}</td>
   <td>{{Spec2('CSS Transforms 2')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

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

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

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

<p>{{Compat("css.properties.perspective-origin")}}</p>

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

<ul>
 <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS" title="CSS/Using_CSS_transforms">Utiliser les transformations CSS</a></li>
 <li>{{cssxref('transform-style')}}</li>
 <li>{{cssxref('transform-function')}}</li>
 <li>{{cssxref('perspective')}}</li>
 <li><a href="/fr/docs/Web/CSS/transform-function/perspective">La fonction de transformation <code>perspective()</code></a></li>
</ul>