W3docs
fr
Se connecter

Propriété CSS perspective-origin

Utilisez la propriété CSS perspective-origin pour définir le point de vue depuis lequel l'élément est affiché. Valeurs et exemples.

La propriété CSS perspective-origin définit la position depuis laquelle le spectateur semble regarder un élément transformé en 3D. En d'autres termes, elle déplace le point de fuite — l'endroit vers lequel convergent les faces inclinées par rapport à l'écran. C'est l'une des propriétés CSS3.

Fonctionnement

Une scène 3D nécessite deux éléments pour être correctement rendue :

  1. La propriété perspective, qui définit l'intensité de l'effet 3D (plus la valeur est petite, plus le raccourcissement est prononcé).
  2. La propriété perspective-origin, qui indique où se trouve la caméra. perspective détermine la profondeur du point de fuite ; perspective-origin détermine sa position horizontale et verticale.

Par défaut, le point de fuite se trouve exactement au centre de l'élément (50% 50%), ce qui donne à une face enfant pivotée un aspect symétrique. Déplacer perspective-origin sur un côté revient à se déplacer autour de l'objet — le même élément enfant semble être vu depuis la gauche, la droite, le dessus ou le dessous.

perspective-origin ne prend effet que lorsque perspective est également défini, soit sur le même élément, soit sur un ancêtre. Sans cela, la propriété est analysée mais n'a aucun effet.

La syntaxe à deux valeurs se lit toujours horizontal en premier, vertical en second (par exemple perspective-origin: 25% 75%). Lorsqu'une seule valeur est fournie, la valeur manquante prend par défaut la valeur center. Les paires de mots-clés tels que top left font exception — les mots-clés peuvent être écrits dans n'importe quel ordre car chaque mot-clé nomme un axe spécifique.

Info

perspective-origin est appliqué à l'élément parent, mais régit la projection de ses éléments enfants — l'élément sur lequel vous l'appliquez n'est pas lui-même transformé.

Valeur initiale50% 50%
S'applique àÉléments transformables.
HéritéeNon.
AnimableOui. La transformation de la perspective est animable.
VersionCSS3
Syntaxe DOMobject.style.perspectiveOrigin = "20px 70%";

Syntaxe

Syntaxe CSS de perspective-origin

perspective-origin: x-position y-position | x | y | closest-side | farthest-side | initial | inherit;

Exemple de la propriété perspective-origin :

Exemple de code CSS perspective-origin

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 60px;
        border: 1px solid #666;
        perspective: 130px;
        perspective-origin: 50% 50%;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: 50% 50%:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>
Essayez vous-même »

Résultat

CSS perspective-origin centré (50% 50%)

Avec la valeur par défaut 50% 50%, le point de fuite est centré, ce qui donne à Box2 pivoté un raccourcissement uniforme. Dans les exemples suivants, nous déplaçons ce point vers un bord et observons le changement d'angle de vue apparent.

Exemple de la propriété perspective-origin avec la valeur "left" :

Exemple CSS perspective-origin avec la valeur left

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 20px;
        border: 1px solid #666;
        perspective: 80px;
        perspective-origin: left;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: left:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>
Essayez vous-même »

Exemple de la propriété perspective-origin avec la valeur "right" :

Exemple CSS perspective-origin avec la valeur right

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 160px;
        border: 1px solid #666;
        perspective: 80px;
        perspective-origin: right;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: right:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>
Essayez vous-même »

Exemple de la propriété perspective-origin définie à "bottom right" :

Exemple CSS perspective-origin bottom

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 60px;
        border: 1px solid #666;
        perspective: 130px;
        perspective-origin: bottom right;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: bottom right:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>
Essayez vous-même »

Valeurs

ValeurDescription
x-positionLa position horizontale du point de fuite. Accepte une <length>, un pourcentage, ou l'un des mots-clés left (= 0), center (= 50%) ou right (= 100%).
y-positionLa position verticale du point de fuite. Accepte une <length>, un pourcentage, ou l'un des mots-clés top (= 0), center (= 50%) ou bottom (= 100%).
initialDéfinit cette propriété à sa valeur par défaut (50% 50%).
inheritHérite de cette propriété depuis son élément parent.

Les valeurs en pourcentage et en longueur sont résolues par rapport à la boîte propre de l'élément, avec l'origine dans le coin supérieur gauche. Ainsi, 0 0 place le point de fuite en haut à gauche, 100% 100% en bas à droite, et des valeurs négatives ou supérieures à 100 % sont autorisées pour placer la caméra en dehors de la boîte.

Compatibilité des navigateurs

perspective-origin est pris en charge par tous les navigateurs modernes. Il n'est plus nécessaire d'utiliser des préfixes fournisseurs tels que -webkit-perspective-origin pour les versions actuelles de Chrome, Edge, Firefox et Safari.

Propriétés associées

  • perspective — définit la distance jusqu'au point de fuite et est requise pour que perspective-origin ait un effet.
  • transform — applique les transformations rotateX, rotateY et translateZ auxquelles la perspective est appliquée.
  • transform-style — utilisez preserve-3d pour que les éléments enfants imbriqués conservent leurs positions 3D dans la perspective.
  • backface-visibility — contrôle si le côté inversé d'un élément pivoté est affiché.

Pratique

Pratique
Que fait la propriété CSS 'perspective-origin' ?
Que fait la propriété CSS 'perspective-origin' ?
Was this page helpful?