perspective
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.
La propriété CSS perspective détermine la distance entre le plan d'équation z = 0 et la position de l'utilisateur·ice afin de donner une perspective aux éléments positionnés en 3D.
Exemple interactif
perspective: none;
perspective: 800px;
perspective: 23rem;
perspective: 5.5cm;
<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: 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: 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);
}
Syntaxe
/* Valeur avec un mot-clé */
perspective: none;
/* Valeurs de type <length> */
perspective: 20px;
perspective: 3.5em;
/* Valeurs globales */
perspective: inherit;
perspective: initial;
perspective: revert;
perspective: revert-layer;
perspective: unset;
Valeurs
none-
Un mot-clé qui indique qu'on n'applique aucune perspective.
<length>-
Une longueur qui indique la distance entre l'utilisateur·ice et le plan d'équation
z = 0. Elle est utilisée pour appliquer une perspective à l'élément et à son contenu. Les valeurs négatives sont des erreurs de syntaxe. Si la valeur est inférieure à1px, elle est ramenée à1px.
Description
Chaque élément 3D avec z>0 devient plus grand ; chaque élément 3D avec z<0 devient plus petit. L'intensité de l'effet est déterminée par la valeur de cette propriété.
Les grandes valeurs de perspective provoquent une petite transformation ; les petites valeurs de perspective provoquent une grande transformation.
Les parties des éléments 3D qui se trouvent derrière l'utilisateur·ice — c'est-à-dire dont les coordonnées sur l'axe z sont supérieures à la valeur de la propriété CSS perspective — ne sont pas dessinées.
Le point de fuite est par défaut placé au centre de l'élément, mais sa position peut être modifiée en utilisant la propriété perspective-origin.
L'utilisation de cette propriété avec une valeur autre que none crée un nouveau contexte d'empilement. De plus, dans ce cas, l'objet agira comme un bloc contenant pour les éléments position: fixed qu'il contient.
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 | une longueur |
| Crée un contexte d'empilement | oui |
Syntaxe formelle
perspective =
none |
<length [0,∞]>
Exemples
Définir la perspective
Un exemple montrant comment un cube varie si la perspective est définie à différentes positions est donné dans Utiliser les transformations CSS > Définir la perspective.
Spécifications
| Spécification |
|---|
| CSS Transforms Module Level 2 # perspective-property |