W3docs
fr
Se connecter

Propriété CSS perspective

Utilisez la propriété CSS perspective pour donner une perspective 3D à un élément. Consultez les valeurs et exemples.

La propriété perspective définit la distance entre le spectateur et le plan z = 0 des enfants 3D d'un élément. En termes simples, elle contrôle l'intensité de l'effet 3D : elle transforme une rotation plate en quelque chose qui semble s'enfoncer dans l'écran, à la manière dont les objets rapetissent lorsqu'ils s'éloignent de notre œil dans la vie réelle.

Elle se définit sur un élément parent. La valeur représente la distance simulée entre le spectateur et l'écran. Des valeurs faibles (comme 100px) placent le spectateur très près, ce qui rend la perspective dramatique et exagérée. Des valeurs plus grandes (comme 1000px) placent le spectateur loin, ce qui rend l'effet subtil et presque plat. Cette page explique le comportement de la propriété et montre la différence entre none et une longueur réelle.

Comme l'enfant se trouve dans un espace 3D, les parties avec z > 0 sont plus proches du spectateur et paraissent plus grandes, tandis que les parties avec z < 0 sont plus loin et paraissent plus petites.

Quand l'utiliser ?

On utilise perspective chaque fois qu'on fait pivoter un élément en 3D (via transform: rotateX(), rotateY(), ou translateZ()) et qu'on souhaite que cette rotation ressemble à une vraie profondeur plutôt qu'à un simple cisaillement plat. Les cas courants incluent les cartes à retourner, les cubes et carrousels 3D, et les effets d'inclinaison au survol.

La propriété perspective accepte une seule valeur <length>. Zéro est valide (il désactive l'effet, comme none), et les valeurs négatives ne sont pas autorisées — elles sont considérées comme invalides et ignorées.

Pour contrôler où se trouve le point de fuite (la position regardée par le spectateur), associez cette propriété à perspective-origin. Pour les rotations 3D elles-mêmes, consultez la propriété transform, et pour maintenir les enfants imbriqués dans le même espace 3D, utilisez transform-style.

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

Info

Propriété perspective vs. la fonction de transformation perspective(). La propriété perspective n'affecte pas l'élément sur lequel elle est définie — elle applique uniquement une vue en perspective aux enfants transformés en 3D de cet élément. La valeur perspective() utilisée dans la propriété transform applique la profondeur directement à l'élément lui-même. Utilisez la propriété lorsque plusieurs enfants partagent une même position de spectateur ; utilisez la fonction lorsqu'un seul élément a besoin de sa propre profondeur.

Info

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

Valeur initialenone
S'applique àLes éléments transformables.
HéritéNon.
AnimatableOui. La transformation de la perspective est animatable.
VersionCSS3
Syntaxe DOMobject.style.perspective = "70px";

Syntaxe

Syntaxe CSS perspective

perspective: length | none | initial | inherit;

Exemple sans perspective (perspective: none)

Avec perspective: none sur le parent, le rotateX(40deg) de l'enfant est rendu comme un cisaillement 2D plat — il n'y a aucun sens de la profondeur. C'est la référence de base pour comparer.

Exemple de code CSS perspective

<!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>
Essayez vous-même »

Résultat

CSS perspective avec px

Exemple avec perspective: 100px

À présent, le parent reçoit une perspective de 100px. Comme le spectateur est simulé très près, le même rotateX(40deg) sur l'enfant est perçu comme une vraie profondeur — le bord supérieur recule dans l'écran et la boîte semble inclinée dans l'espace 3D. Essayez d'augmenter la valeur à 500px ou 1000px et l'inclinaison devient plus douce.

Exemple CSS perspective avec px

<!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>
Essayez vous-même »

Valeurs

ValeurDescription
lengthApplique une transformation en perspective à l'élément et à son contenu.
noneN'applique aucune transformation en perspective.
initialFait utiliser à la propriété sa valeur par défaut.
inheritHérite la propriété de son élément parent.

Pièges courants

  • Définissez-la sur le parent, pas sur l'élément pivoté. Une erreur courante consiste à mettre perspective sur le même élément qu'on fait pivoter — cela ne fait rien. Déplacez-la vers le parent, ou utilisez la fonction perspective() dans transform sur l'élément lui-même.
  • L'ordre compte avec la fonction perspective(). Lorsqu'on utilise la fonction, écrivez-la en premier : transform: perspective(500px) rotateX(40deg). Placée après la rotation, elle s'applique à un système de coordonnées déjà pivoté et le résultat change.
  • La 3D imbriquée nécessite transform-style: preserve-3d. Sans cela (la valeur par défaut est flat), les petits-enfants sont aplatis dans le plan de leur parent et la profondeur est perdue.

Propriétés associées

  • perspective-origin — définit la position du point de fuite.
  • transform — applique les rotations et translations 3D auxquelles perspective donne de la profondeur.
  • transform-style — maintient les éléments imbriqués dans l'espace 3D partagé.
  • backface-visibility — masque le dos d'un élément lorsqu'il est pivoté à l'opposé du spectateur.

Pratique

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