La perspectivepropriété CSS donne à un élément un espace 3D en affectant la distance entre le plan Z et l'utilisateur.
La force de l'effet est déterminée par la valeur. Plus la valeur est petite, plus vous vous rapprochez du plan Z et plus l'effet visuel est impressionnant. Plus la valeur est élevée, plus l'effet sera subtil.
Important: veuillez noter que la propriété perspective n'affecte pas la façon dont l'élément est rendu; il active simplement un espace 3D pour les éléments enfants. C'est la principale différence entre la transform: perspective()fonction et la perspectivepropriété. Le premier donne de la profondeur à l'élément tandis que le second crée un espace 3D partagé par tous ses enfants transformés.
/** * Syntax * perspective: none | */ .parent ( perspective: 1000px; ) .child ( transform: rotateY(50deg); ) La démo ci-dessus vise à montrer la différence entre la fonction et la propriété.
- Sur le côté gauche, vous pouvez voir la propriété appliquée au parent (
perspective: 50em) des éléments transformés (transform: rotateY(50deg)). - Sur le côté droit, la perspective est appliquée à partir de la transformation directement sur les enfants (
transform: perspective(50em) rotateY(50deg)).
Cela montre comment la mise en perspective du parent fait que tous les enfants partagent le même espace 3D et donc le même point de fuite.
Essayons quelque chose d'encore plus cool: un cube avec des transformations 3D et une perspective.
Voici comment le cube est fait: il repose sur deux wrappers imbriqués (un pour donner une perspective au cube et un pour envelopper tous les côtés) et 6 éléments pour faire les côtés. Chaque élément reçoit sa propre transformation mélangeant la translation et la rotation dans l'espace 3D (par exemple transform: rotateX(90deg) translateZ(1em)).
Terminons par une démo présentant ce qui pourrait être la base d'un design du monde réel: un mur de photographies + légendes utilisant la perspective et la transformation.
Lorsqu'ils survolent le mur, les enfants retournent à leur position normale, annulant l'effet.
Important! L'utilisation de la perspective (avec une valeur différente de 0 ou aucune) crée un nouveau contexte d'empilement.
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | Tout | 10+ | Aucun | 10+ | 3+ | Tout |
Firefox 10-15 a besoin de -moz-, les navigateurs WebKit peuvent avoir besoin de -webkit-