w3docs logo

Propriété CSS perspective-origin

La propriété perspective-origin définit la position depuis laquelle l'utilisateur regarde l'élément de la position 3D.

La propriété perspective utilise la valeur de perspective-origin comme un point de fuite.

La propriété perspective-origin fonctionne toujours avec la propriété perspective.

Seul l'élément enfant obtient une vue en perspective et non l'élément lui-même.

Pour la compatibilité maximale des navigateurs, cette propriété est utilisée avec l'extension -webkit-.

Valeur initiale 50% 50%
Appliquée à Éléments transformables.
Héritée Non.
Animable Oui. La transformation de cette perspective est animable.
Version CSS3
Syntaxe DOM object.style.perspectiveOrigin = "20px 70%";

Syntaxe

perspective-origin: x-position y-position | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .element1 {
      position: relative;
      height: 150px;
      width: 150px;
      margin-left: 60px;
      border: 1px solid #666;
      -webkit-perspective: 130px; /* Safari 4-8  */
      -webkit-perspective-origin: 50% 50%; /* Safari 4-8  */  
      perspective: 130px;
      perspective-origin: 50% 50%;  
      }
      .element2 {
      padding: 50px;
      position: absolute;
      border: 1px solid #000;
      background-color: #1c87c9;
      background: #8ebf42; 
      -webkit-transform-style: preserve-3d; /* Safari 3-8  */  
      -webkit-transform: rotateX(45deg); /* Safari 3-8  */
      transform-style: preserve-3d;
      transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété perspective-origin</h2>
    <h3>Perspective-origin: 50% 50%:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

Voyons un exemple avec la valeur "left":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .element1 {
      position: relative;
      height: 150px;
      width: 150px;
      margin-left: 20px;
      border: 1px solid #666;
      -webkit-perspective: 80px; /* Safari 4-8  */
      -webkit-perspective-origin: left; /* Safari 4-8  */  
      perspective: 80px;
      perspective-origin: left;  
      }
      .element2 {
      padding: 50px;
      position: absolute;
      border: 1px solid #000;
      background-color: #1c87c9;
      background: #8ebf42; 
      -webkit-transform-style: preserve-3d; /* Safari 3-8  */  
      -webkit-transform: rotateX(45deg); /* Safari 3-8  */
      transform-style: preserve-3d;
      transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété perspective-origin</h2>
    <h3>Perspective-origin: left:</h3>
    <div class="element1">
      Boîte 1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

Un autre exemple, dans lequel perspective-origin est spécifiée "right":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .element1 {
      position: relative;
      height: 150px;
      width: 150px;
      margin-left: 160px;
      border: 1px solid #666;
      -webkit-perspective: 80px; /* Safari 4-8  */
      -webkit-perspective-origin: right; /* Safari 4-8  */  
      perspective: 80px;
      perspective-origin: right;  
      }
      .element2 {
      padding: 50px;
      position: absolute;
      border: 1px solid #000;
      background-color: #1c87c9;
      background: #8ebf42; 
      -webkit-transform-style: preserve-3d; /* Safari 3-8  */  
      -webkit-transform: rotateX(45deg); /* Safari 3-8  */
      transform-style: preserve-3d;
      transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété perspective-origin</h2>
    <h3>Perspective-origin: right:</h3>
    <div class="element1">
      Box1
      <div class="element2">Boîte2</div>
    </div>
  </body>
</html>

Un autre exemple, dans lequel perspective-origin est définie comme "bottom right":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .element1 {
      position: relative;
      height: 150px;
      width: 150px;
      margin-left: 60px;
      border: 1px solid #666;
      -webkit-perspective: 130px; /* Safari 4-8  */
      -webkit-perspective-origin: bottom right; /* Safari 4-8  */  
      perspective: 130px;
      perspective-origin: bottom right;  
      }
      .element2 {
      padding: 50px;
      position: absolute;
      border: 1px solid #000;
      background-color: #1c87c9;
      background: #8ebf42; 
      -webkit-transform-style: preserve-3d; /* Safari 3-8  */  
      -webkit-transform: rotateX(45deg); /* Safari 3-8  */
      transform-style: preserve-3d;
      transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété perspective-origin</h2>
    <h3>Perspective-origin: bottom right:</h3>
    <div class="element1">
      Boîte1
      <div class="element2">Boîte2</div>
    </div>
  </body>
</html>

Valeurs

Valeur Description
x-position Spécifie la position de vue en x-axis. Elle peut avoir les valeurs suivantes:
  • left,
  • right,
  • center,
  • length,
  • percentage.
y-position Spécifie la position de vue en y-axis. Elle peut avoir les valeurs suivantes:
  • top,
  • center,
  • bottom,
  • length,
  • percentage.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

chrome firefox safari opera
36.0+
12.0-35.0 -webkit- 		16.0+
10.0-15.0 -moz- 		4.0+
-webkit- 		23.0+
15.0-22.0 -webkit-

Pratiquez vos connaissances

Qu'est-ce que la propriété CSS 'perspective-origin' peut influencer dans le rendu d'un élément?
Trouvez-vous cela utile?