Proprit CSS `perspective-origin`

Baseline Large disponibilit

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2015.

En savoir plus
Voir la compatibilit complte

La proprit CSS perspective-origin dtermine la position depuis laquelle le spectateur regarde le document. Elle est utilise comme point de fuite par la proprit perspective.

Exemple interactif

perspective-origin: center;

perspective-origin: top;

perspective-origin: bottom right;

perspective-origin: -170%;

perspective-origin: 500% 200%;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</section>

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 550px;
}

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  perspective: 250px;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgb(90 90 90 / 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

Les proprits perspective-origin et perspective sont rattacher l'lment parent de l'lment qu'on veut placer dans un espace 3D. En revanche, la fonction perspective() s'applique mme l'lment qu'on veut placer en 3D.

Syntaxe

css

/* 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-cls */
/* on peut aussi avoir la forme suivante valide        */
perspective-origin: y-position x-position;

/* Valeurs globales */
perspective-origin: inherit;
perspective-origin: initial;
perspective-origin: revert;
perspective-origin: revert-layer;
perspective-origin: unset;

Valeurs

x-position

Indique la position de l'abscisse du point de fuite. Elle peut avoir l'une des valeurs suivantes :

<length-percentage> indiquant la position comme une valeur de longueur absolue ou relative la largeur de l'lment. La valeur peut tre ngative.
left, un mot-cl tant un raccourci pour la valeur de longueur 0.
center, un mot-cl tant un raccourci pour la valeur de pourcentage 50%.
right, un mot-cl tant un raccourci pour la valeur de pourcentage 100%.

y-position

Indique la position de l'ordonne du point de fuite. Elle peut avoir l'une des valeurs suivantes :

<length-percentage> indiquant la position comme une valeur de longueur absolue ou relative la hauteur de l'lment. La valeur peut tre ngative.
top, un mot-cl tant un raccourci pour la valeur de longueur 0.
center, un mot-cl tant un raccourci pour la valeur de pourcentage 50%.
bottom, un mot-cl tant un raccourci pour la valeur de pourcentage 100%.

Dfinition formelle

Valeur initiale	`50% 50%`
Applicabilit	lments transformables
Hrite	non
Pourcentages	se rapporte la taille de la bote de l'lment
Valeur calcule	pour une valeur de type `<length>` sa valeur absolue, sinon un pourcentage
Type d'animation	liste simple de longueur, pourcentage ou calc

Syntaxe formelle

perspective-origin = 
  <position>  

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<length-percentage> = 
  <length>      |
  <percentage>

Cette syntaxe reflte le dernier standard selon CSS Transforms Module Level 2, CSS Values and Units Module Level 4, CSS Values and Units Module Level 5. Tous les navigateurs n'ont peut-tre pas implment toutes les parties. Voir la Compatibilit des navigateurs pour plus d'informations sur la prise en charge.

Spcification
CSS Transforms Module Level 2 # perspective-origin-property

Compatibilit des navigateurs

Voir aussi

Utiliser les transformations CSS
La proprit transform-style
Le type de donne <transform-function>
La proprit perspective
La fonction de transformation perspective()

Aider amliorer MDN

Cette page vous a-t-elle t utile ?

Oui Non

Apprendre contribuer

Cette page a t modifie le 20 avr. 2026 par les contributeurices du MDN.

Voir cette page sur GitHub Signaler un problme avec ce contenu

Proprit CSS perspective-origin

Dans cet article

Aider amliorer MDN

Proprit CSS `perspective-origin`