Propriété perspective CSS

La propriété perspective donne une certaine perspective à un élément positionné en 3D et détermine la distance entre le plan z=0 et le spectateur.

Un élément 3D avec z > 0 devient plus grand, un élément 3D avec z < 0 devient plus petit.

La propriété perspective accepte une valeur de longueur. Zéro est valide, tandis que les valeurs négatives sont traitées comme positives.

La propriété perspective fait partie des propriétés CSS3.

INFO

La principale différence entre la propriété perspective et la valeur perspective() de la propriété transform est la suivante : la propriété perspective n'affecte pas l'élément lui-même ; elle applique uniquement une vue en perspective à ses éléments enfants. Alors que la fonction perspective() applique la profondeur directement à l'élément auquel elle est appliquée.

INFO

Les navigateurs modernes prennent entièrement en charge cette propriété sans préfixes fournisseurs.

Valeur initiale	none
S'applique à	Éléments transformables.
Héritée	Non.
Animable	Oui. La transformation de la perspective est animable.
Version	CSS3
Syntaxe DOM	object.style.perspective = "70px";

Syntaxe

Syntaxe CSS de perspective

css

perspective: length | none | initial | inherit;

Exemple de la propriété perspective :

Exemple de code CSS pour perspective

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the element</title>
    <style>
        .element1 {
        padding: 50px;
        position: absolute;
        border: 1px solid #666;
        background-color: #1c87c9;
        background: #8ebf42;
        -webkit-transform-style: preserve-3d;/* Safari 3-8  */
        -webkit-transform: rotateX(40deg);/* Safari 3-8  */
        transform-style: preserve-3d;
        transform: rotateX(40deg);
      }
      .element2 {
        position: relative;
        height: 160px;
        width: 160px;
        margin-left: 20px;
        border: 1px solid #000;
        -webkit-perspective: none;/* Safari 4-8  */
        perspective: none;
      }
    </style>
  </head>
  <body>
    <h2>Perspective property example</h2>
    <h3>perspective: none:</h3>
    <div class="element2">
      Box2
      <div class="element1">Box1</div>
    </div>
  </body>
</html>

Try it Yourself »

Résultat

Perspective CSS avec px

Exemple de la propriété perspective spécifiée à 100px :

Exemple CSS de perspective avec px

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the element</title>
    <style>
        .element1 {
        padding: 50px;
        position: absolute;
        border: 1px solid #666;
        background-color: #1c87c9;
        background: #8ebf42;
        -webkit-transform-style: preserve-3d;/* Safari 3-8  */
        -webkit-transform: rotateX(40deg);/* Safari 3-8  */
        transform-style: preserve-3d;
        transform: rotateX(40deg);
      }
      .element2 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 50px;
        border: 1px solid #000;
        -webkit-perspective: 100px;/* Safari 4-8  */
        perspective: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Perspective property example</h2>
    <h3>perspective: 100px:</h3>
    <div class="element2">
      Box2
      <div class="element1">Box1</div>
    </div>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description
length	Applique une transformation de perspective à l'élément et à son contenu.
none	N'applique aucune transformation de perspective.
initial	Fait utiliser à la propriété sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

Que fait la propriété CSS 'perspective' ?

Elle définit la couleur d'un élémentElle détermine la distance entre le plan z et l'utilisateurElle ajuste l'espace 3D d'un élémentElle affecte l'ombre portée d'un élémentElle crée un sentiment de profondeur en affectant l'échelle d'un élément

Propriété perspective CSS ​

Syntaxe ​

Exemple de la propriété perspective : ​

Résultat ​

Exemple de la propriété perspective spécifiée à 100px : ​

Valeurs ​