perspective-origin

Baseline Widely available

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.

La propriétéperspective-origin détermine la poisition depuis laquelle le spectateur regarde le document. Elle est utilisée comme point de fuite par la propriétéperspective.

Exemple interactif

perspective-origin: center;

perspective-origin: top;

perspective-origin: bottom right;

perspective-origin: -170%;

perspective-origin: 500% 200%;

<section>  <div>    <div>1</div>    <div>2</div>    <div>3</div>    <div>4</div>    <div>5</div>    <div>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: rgba(90, 90, 90, 0.7);  transform: translateZ(50px);}.back {  background: rgba(0, 210, 0, 0.7);  transform: rotateY(180deg) translateZ(50px);}.right {  background: rgba(210, 0, 0, 0.7);  transform: rotateY(90deg) translateZ(50px);}.left {  background: rgba(0, 0, 210, 0.7);  transform: rotateY(-90deg) translateZ(50px);}.top {  background: rgba(210, 210, 0, 0.7);  transform: rotateX(90deg) translateZ(50px);}.bottom {  background: rgba(210, 0, 210, 0.7);  transform: rotateX(-90deg) translateZ(50px);}

Les propriétésperspective-origin etperspective sont à rattacher à l'élément parent de l'élément qu'on veut placer dans un espace 3D. En revanche, la fonctionperspective() s'applique à même l'élément 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-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;

Valeurs

x-position

Indique l'abscisse de la position du point de fuite. La valeur peut être :

De type<length-percentage> : la position est indiquée comme une longueur absolue ou relativement à la largeur de l'élément. La valeur peut être négative.
left : un mot-clé qui est un alias pour indiquer une longueur nulle.
center : un mot-clé qui est un alias pour indiquer une valeur de pourcentage de50%.
right : un mot-clé qui est un alias pour indiquer un pourcentage de100%.

y-position

Indique l'ordonnée de la position du point de fuite. La valeur peut être :

De type<length-percentage> : la position est indiquée comme une longueur absolue ou relativement à la hauteur de l'élément. La valeur peut être négative.
De type<length> : la position est indiquée avec une valeur de longueur. La valeur peut être négative.
top : un mot-clé qui est un alias pour indiquer une longueur nulle.
center : un mot-clé qui est un alias pour indiquer une valeur de pourcentage de50%.
bottom : un mot-clé qui est un alias pour indiquer un pourcentage de100%.

Définition formelle

Valeur initiale	`50% 50%`
Applicabilité	éléments transformables
Héritée	non
Pourcentages	se rapporte à la taille de la boîte de l'élément
Valeur calculée	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>

Exemples

Cubes avec des valeurs communes pour`perspective-origin`

HTML

html

<section><figure>  <caption><code>perspective-origin: top left;</code></caption>    <div>    <div>      <div>1</div>      <div>2</div>      <div>3</div>      <div>4</div>      <div>5</div>      <div>6</div>    </div></figure><figure>  <caption><code>perspective-origin: top;</code></caption>   <div>    <div>      <div>1</div>      <div>2</div>      <div>3</div>      <div>4</div>      <div>5</div>      <div>6</div>    </div>  </div></figure><figure>  <caption><code>perspective-origin: top right;</code></caption>  <div>    <div>      <div>1</div>      <div>2</div>      <div>3</div>      <div>4</div>      <div>5</div>      <div>6</div>    </div>  </div></figure><figure>  <caption><code>perspective-origin: left;</code></caption>  <div>    <div>      <div>1</div>      <div>2</div>      <div>3</div>      <div>4</div>      <div>5</div>      <div>6</div>    </div>  </div></figure><figure>  <caption><code>perspective-origin: 50% 50%;</code></caption>  <div>    <div>      <div>1</div>      <div>2</div>      <div>3</div>      <div>4</div>      <div>5</div>      <div>6</div>    </div>  </div></figure><figure>  <caption><code>perspective-origin: right;</code></caption>  <div>    <div>      <div>1</div>      <div>2</div>      <div>3</div>      <div>4</div>      <div>5</div>      <div>6</div>    </div>  </div></figure><figure>  <caption><code>perspective-origin: bottom left;</code></caption>  <div>    <div>      <div>1</div>      <div>2</div>      <div>3</div>      <div>4</div>      <div>5</div>      <div>6</div>    </div>  </div></figure><figure>  <caption><code>perspective-origin: bottom;</code></caption>  <div>    <div>      <div>1</div>      <div>2</div>      <div>3</div>      <div>4</div>      <div>5</div>      <div>6</div>    </div>  </div></figure><figure>  <caption><code>perspective-origin: bottom right;</code></caption>  <div>    <div>      <div>1</div>      <div>2</div>      <div>3</div>      <div>4</div>      <div>5</div>      <div>6</div>    </div>  </div></figure><figure>  <caption><code>perspective-origin: -200% -200%;</code></caption>  <div>    <div>      <div>1</div>      <div>2</div>      <div>3</div>      <div>4</div>      <div>5</div>      <div>6</div>    </div>  </div></figure><figure>  <caption><code>perspective-origin: 200% 200%;</code></caption>  <div>    <div>      <div>1</div>      <div>2</div>      <div>3</div>      <div>4</div>      <div>5</div>      <div>6</div>    </div>  </div></figure><figure>  <caption><code>perspective-origin: 200% -200%;</code></caption>  <div>    <div>      <div>1</div>      <div>2</div>      <div>3</div>      <div>4</div>      <div>5</div>      <div>6</div>    </div>  </div></figure></section>

CSS

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);}