Revision 1100007 of perspective-origin

<div>{{CSSRef}} {{SeeCompatTable}}</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>

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

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

<pre class="brush:css">
perspective-origin: x-position;              /* une valeur */
perspective-origin: x-position y-position;   /* deux valeurs */

/* 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;percentage&gt;")}} : la position est indiquée relativement à la largeur 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>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;percentage&gt;")}} : la position est indiquée 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>

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

<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;table&gt;
   &lt;tbody&gt;
      &lt;tr&gt;
         &lt;th&gt;&lt;code&gt;perspective-origin: top left;&lt;/code&gt;
         &lt;/th&gt;
         &lt;th&gt;&lt;code&gt;perspective-origin: top;&lt;/code&gt;
         &lt;/th&gt;
         &lt;th&gt;&lt;code&gt;perspective-origin: top right;&lt;/code&gt;
         &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
         &lt;td&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;/div&gt;
         &lt;/td&gt;
         &lt;td&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;/td&gt;
         &lt;td&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;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
         &lt;th&gt;&lt;code&gt;perspective-origin: left;&lt;/code&gt;
         &lt;/th&gt;
         &lt;th&gt;&lt;code&gt;perspective-origin: 50% 50%;&lt;/code&gt;
         &lt;/th&gt;
         &lt;th&gt;&lt;code&gt;perspective-origin: right;&lt;/code&gt;
         &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
         &lt;td&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;/td&gt;
         &lt;td&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;/td&gt;
         &lt;td&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;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
         &lt;th&gt;&lt;code&gt;perspective-origin: bottom left;&lt;/code&gt;
         &lt;/th&gt;
         &lt;th&gt;&lt;code&gt;perspective-origin: bottom;&lt;/code&gt;
         &lt;/th&gt;
         &lt;th&gt;&lt;code&gt;perspective-origin: bottom right;&lt;/code&gt;
         &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
         &lt;td&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;/td&gt;
         &lt;td&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;/td&gt;
         &lt;td&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;/td&gt;
      &lt;/tr&gt;
   &lt;/tbody&gt;
&lt;/table&gt;</pre>

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

<pre class="brush: css">
/* On utilise des classes pour les valeurs de perspective-origin */
.potl {
    perspective-origin: top left;
    -webkit-perspective-origin: top left;
}
.potm {
    perspective-origin: top;
    -webkit-perspective-origin: top;
}
.potr {
    perspective-origin: top right;
    -webkit-perspective-origin: top right;
}
.poml {
    perspective-origin: left;
    -webkit-perspective-origin: left;
}
.pomm {
    perspective-origin: 50% 50%;
    -webkit-perspective-origin: 50% 50%;
}
.pomr {
    perspective-origin: right;
    -webkit-perspective-origin: right;
}
.pobl {
    perspective-origin: bottom left;
    -webkit-perspective-origin: bottom left;
}
.pobm {
    perspective-origin: bottom;
    -webkit-perspective-origin: bottom;
}
.pobr {
    perspective-origin: bottom right;
    -webkit-perspective-origin: bottom right;
}

/* On définit le div container, celui pour 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;
   -webkit-backface-visibility: visible;
   -webkit-perspective: 300px;
   -webkit-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 en fonction de la direction */
 .front {
   background: rgba(0, 0, 0, 0.3);
   transform: translateZ(50px);
   -webkit-transform: translateZ(50px);
}
.back {
   background: rgba(0, 255, 0, 1);
   color: black;
   transform: rotateY(180deg) translateZ(50px);
   -webkit-transform: rotateY(180deg) translateZ(50px);
}
.right {
   background: rgba(196, 0, 0, 0.7);
   transform: rotateY(90deg) translateZ(50px);
   -webkit-transform: rotateY(90deg) translateZ(50px);
}
.left {
   background: rgba(0, 0, 196, 0.7);
   transform: rotateY(-90deg) translateZ(50px);
   -webkit-transform: rotateY(-90deg) translateZ(50px);
}
.top {
   background: rgba(196, 196, 0, 0.7);
   transform: rotateX(90deg) translateZ(50px);
   -webkit-transform: rotateX(90deg) translateZ(50px)
}
.bottom {
   background: rgba(196, 0, 196, 0.7);
   transform: rotateX(-90deg) translateZ(50px);
   -webkit-transform: rotateX(-90deg) translateZ(50px);
}

/* On améliore un peu le tableau */
th, p, td {
   background-color: #EEEEEE;
   padding: 10px;
   font-family: sans-serif;
   text-align: left;
}</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('CSS3 Transforms', '#perspective-origin-property', 'perspective-origin')}}</td>
   <td>{{Spec2('CSS3 Transforms')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

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

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Support simple</td>
   <td>12{{property_prefix('-webkit')}}</td>
   <td>{{CompatGeckoDesktop("10")}}{{property_prefix('-moz')}}<br />
    {{CompatGeckoDesktop("16")}}<sup>[1]</sup></td>
   <td>10</td>
   <td>15</td>
   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Support simple</td>
   <td>3.0{{property_prefix('-webkit')}}</td>
   <td>{{CompatGeckoMobile("10")}}{{property_prefix('-moz')}}<br />
    {{CompatGeckoMobile("16")}}<sup>[1]</sup></td>
   <td>8.1</td>
   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>&nbsp;[1] En plus de la version non préfixée, Gecko 44.0 {{geckoRelease("44.0")}} prend en charge la version préfixée par <code>-webkit</code> à des fins de compatibilité web grâce à la préférence <code>layout.css.prefixes.webkit</code> dont la valeur par défaut vaut <code>false</code>. Depuis Gecko 49.0 {{geckoRelease("49.0")}}, cette valeur par défaut est passée à <code>true</code>.</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>
</ul>