perspective

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 détermine la distance entre le plan d'équation z = 0 et la position de l'utilisateur afin de donner une perspective aux objets positionnés dans l'espace 3D. Chaque élément pour lequel la côte (z) est positif sera plus grand et chaque élément pour lequel z est négatif apparaîtra plus petit. La force de cet effet est déterminée par la valeur de cette propriété.

Exemple interactif

perspective: none;

perspective: 800px;

perspective: 23rem;

perspective: 5.5cm;

<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: 800px;  perspective-origin: 150% 150%;}#example-element {  width: 100px;  height: 100px;  perspective: 550px;  transform-style: preserve-3d;}.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 parties des éléments 3D qui se situent derrière l'utilisateur (c'est-à-dire ceux pour lesquels leur coordonnée en z est plus grande que la valeur de la propriétéperspective) ne sont pas dessiné.

Par défaut, le point de fuite est placé au centre de l'élément mais il peut être déplacé grâce à la propriétéperspective-origin.

Si on utilise cette propriété avec une valeur différente de0 ounone, cela créera un nouveaucontexte d'empilement. Et l'objet joue alors le rôle de bloc englobant pour les éléments qu'il contient et qui ontposition: fixed ouposition: absolute

Syntaxe

css

/* Valeur avec un mot-clé */perspective: none;/* Valeurs de longueur *//* Type <length>       */perspective: 20px;perspective: 3.5em;/* Valeurs globales */perspective: inherit;perspective: initial;perspective: unset;

Valeurs

none: Un mot-clé qui indique qu'on n'applique aucune perspective.
<length>: Une longueur (une valeur de type<length>) qui indique la distance entre l'utilisateur et le plan d'équation z = 0. Elle est utilisée pour appliquer une perspective à l'élément et à son contenu. Si elle vaut0 ou qu'elle est négative, aucune transformation de perspective ne sera appliquée.

Définition formelle

Valeur initiale	`none`
Applicabilité	éléments transformables
Héritée	non
Valeur calculée	la longueur absolue ou le mot-clé`none`
Type d'animation	unelongueur
Crée uncontexte d'empilement	oui

Syntaxe formelle

perspective =
none|
<length [0,∞]>

Exemples

Trois cubes

HTML

html

<table>  <tbody>    <tr>      <th><code>perspective: 250px;</code></th>      <th><code>perspective: 350px;</code></th>    </tr>    <tr>      <td>        <div>          <div>            <div>1</div>            <div>2</div>            <div>3</div>            <div>4</div>            <div>5</div>            <div>6</div>          </div>        </div>      </td>      <td>        <div>          <div>            <div>1</div>            <div>2</div>            <div>3</div>            <div>4</div>            <div>5</div>            <div>6</div>          </div>        </div>      </td>    </tr>    <tr>      <th><code>perspective: 500px;</code></th>      <th><code>perspective: 650px;</code></th>    </tr>    <tr>      <td>        <div>          <div>            <div>1</div>            <div>2</div>            <div>3</div>            <div>4</div>            <div>5</div>            <div>6</div>          </div>        </div>      </td>      <td>        <div>          <div>            <div>1</div>            <div>2</div>            <div>3</div>            <div>4</div>            <div>5</div>            <div>6</div>          </div>        </div>      </td>    </tr>  </tbody></table>

CSS

css

/* Des classes pour les différentes valeurs */.pers250 {  perspective: 250px;}.pers350 {  perspective: 350px;}.pers500 {  perspective: 500px;}.pers650 {  perspective: 650px;}/* On définit le div pour le conteneur, *//* le cube, ainsi qu'une face générique */.container {  width: 200px;  height: 200px;  margin: 75px 0 0 75px;  border: none;}.cube {  width: 100%;  height: 100%;  backface-visibility: visible;  perspective-origin: 150% 150%;  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 sa direction */.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 légèrement le tableau */th,p,td {  background-color: #eeeeee;  padding: 10px;  font-family: sans-serif;  text-align: left;}