perspective

Syntaxe

Paramètres

Description

Cette propriété permet d'indiquer combien de pixels dans un élément en 3 dimensions est placé dans la vue.

Remarques

• Création d'un effet de profondeur : La propriété perspective est utilisée pour donner une illusion de profondeur 3D aux éléments d'une page en modifiant la perspective de l'espace dans lequel ils sont positionnés. En affectant un élément avec cette propriété, il semble être plus proche ou plus éloigné en fonction de la distance de la caméra, ce qui donne un effet de profondeur dynamique à la scène.
• Contrôle de la distance de la perspective : La valeur de perspective détermine la distance entre l'élément cible et l'observateur (la caméra virtuelle). Par exemple, une petite valeur comme perspective: 200px; rapprochera l'élément de l'observateur, créant un effet de perspective plus marqué, tandis qu'une grande valeur comme perspective: 1000px; rendra la perspective plus subtile.
• Effet appliqué aux enfants d'un élément : Lorsque vous appliquez perspective à un conteneur, cet effet est transmis aux éléments enfants étant transformés en 3D. Cela permet de créer des animations où les enfants semblent se déplacer dans un espace tridimensionnel, tout en conservant la perspective du conteneur. Cette fonctionnalité est très utilisée pour des effets de transition ou d'animation.
• Comparaison avec transform et transform-style : La propriété perspective affecte la perception de la transformation des éléments 3D, mais elle ne déforme pas directement les éléments. Elle fonctionne en tandem avec des propriétés comme transform (pour appliquer des transformations comme la rotation ou la translation) et transform-style, définissant comment les enfants d'un élément doivent être traités dans l'espace 3D.
• Valeurs de perspective: unités et contexte : La valeur de perspective est généralement définie en pixels (par exemple, perspective: 500px;), bien qu'elle puisse également être exprimée en d'autres unités comme les pourcentages. Un pourcentage fait référence à la distance par rapport à l'élément contenant, ce qui peut être utile pour des mises en page fluides. Cependant, les pixels restent la norme pour des effets 3D plus prévisibles.
• Amélioration de l'animation 3D avec perspective : En utilisant perspective en combinaison avec des animations et transitions CSS, vous pouvez obtenir des effets 3D réalistes sur des éléments. Par exemple, lors de l'application d'une rotation 3D, perspective peut rendre l'élément plus "réaliste" en simuler la profondeur, ce qui le rend plus immersif pour l'utilisateur.
• Affectation globale ou locale : La propriété perspective peut être définie soit globalement, pour affecter tous les éléments enfants d'un conteneur (en appliquant perspective sur le parent), soit localement, pour des effets spécifiques à un sous-ensemble d'éléments dans la scène. En l'appliquant directement aux éléments enfants, vous pouvez créer des effets de perspective variés sans perturber l'ensemble du design.
• Utilisation dans les projets responsives : L'effet de perspective peut être intégré de manière dynamique dans des projets responsives pour ajouter un effet visuel agréable s'adaptant à différentes tailles d'écran. Par exemple, l'augmentation de la valeur de perspective pour les petits écrans rendra les effets 3D plus subtils, ce qui peut offrir une meilleure expérience utilisateur sur des appareils mobiles.