OUJOOD.COM
La propriété CSS perspective-origin: définition
La propriété CSS perspective-origin permet de définir le point de vue à partir duquel les éléments en 3D seront visualisés.
Syntaxe générale de la propriété perspective-origin CSS
La syntaxe générale de la propriété perspective-origin est :
perspective-origin: x y;
où x et y sont des valeurs en pixels, en pourcentage ou en mots clés, qui définissent la position du point de vue.
Valeurs par défaut | 50% 50% |
---|---|
Inherited: | non |
Animable : | oui En savoir plus sur l'animable |
Version: | CSS3 |
Syntaxe JavaScript: | object.style.perspectiveOrigin="10px 50%" |
Valeurs possibles de la propriété perspective-origin CSS
Les valeurs possibles pour la propriété perspective-origin sont :
- x : une valeur en pixels, en pourcentage ou en mots clés(left, center et right), qui définit la position horizontale du point de vue. Les valeurs en pixels et en pourcentage sont relatives à la largeur de l'élément parent, tandis que les mots clés définissent des positions prédéfinies.
- y : une valeur en pixels, en pourcentage ou en mots clés(top, center et bottom), qui définit la position verticale du point de vue. Les valeurs en pixels et en pourcentage sont relatives à la hauteur de l'élément parent, tandis que les mots clés définissent des positions prédéfinies.
- initial : rétablit la valeur par défaut de la propriété.
- inherit : hérite la valeur de la propriété de l'élément parent.
Exemples pratiques d'utilisation de la propriété perspective-origin CSS
Voici quelques exemples d'utilisation de la propriété perspective-origin :
Exemple : 📋 Copier le code
/* Définit le point de vue en haut à gauche */ perspective-origin: top left; /* Définit le point de vue en bas au centre */ perspective-origin: 50% 100px; /* Rétablit la valeur par défaut */ perspective-origin: initial; /* Hérite la valeur de l'élément parent */ perspective-origin: inherit;
Exemple 2
Exemple : 📋 Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"> <title>Effet de perspective avec la propriété CSS perspective-origin</title> <style> #div1 { position: relative; height: 150px; width: 150px; margin-left: 60px; border: 1px solid blue; perspective: 100px; perspective-origin: left; } #div2, #div4, #div6 { padding: 50px; position: absolute; border: 1px solid black; background-color: red; background: rgba(200,100,100,0.5); transform-style: preserve-3d; transform: rotateX(45deg); } #div3 { position: relative; height: 150px; width: 150px; margin-left: 60px; border: 1px solid blue; perspective: 100px; perspective-origin: bottom right; } #div5 { position: relative; height: 150px; width: 150px; margin-left: 60px; border: 1px solid blue; perspective: 100px; perspective-origin: -90%; } </style> </head> <body> <h1>La propriété perspective-origin css</h1> <h2>perspective-origin: left:</h2> <div id="div1">DIV1 <div id="div2">DIV2</div> </div> <h2>perspective-origin: bottom right:</h2> <div id="div3">DIV3 <div id="div4">DIV4</div> </div> <h2>perspective-origin: -90%:</h2> <div id="div5">DIV5 <div id="div6">DIV6</div> </div> </body> </html>
Animation de la perspective-origine CSS, juste pour le plaisir !
Exemple : 📋 Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"> <title>Effet de perspective avec la propriété CSS perspective-origin</title> <style> .cube { font-size: 5em; width: 2em; height: 2em; margin: 1em auto; transform-style: preserve-3d; perspective: 500px; animation: move-origin infinite 2s; } .side { position: absolute; width: 2em; height: 2em; background: rgba(190,0,0, .6); border: 1px solid rgba(0,0,0,.5); color: white; text-align: center; line-height: 2em; } .front { transform: translateZ(1em); } .top { transform: rotateX( 90deg) translateZ(1em); } .right { transform: rotateY( 90deg) translateZ(1em); } .left { transform: rotateY(-90deg) translateZ(1em); } .bottom { transform: rotateX(-90deg) translateZ(1em); } .back { transform: rotateY(-180deg) translateZ(1em); } @keyframes move-origin { 0% { perspective-origin: 0% 0%; } 25% { perspective-origin: 100% 0%; } 50% { perspective-origin: 100% 100%; } 75% { perspective-origin: 0% 100%; } 100% { perspective-origin: 0% 0%; } } </style> </head> <body> <h1>La propriété perspective-origin css</h1> <div class="cube"> <div class="side front">1</div> <div class="side back">6</div> <div class="side right">4</div> <div class="side left">3</div> <div class="side top">5</div> <div class="side bottom">2</div> </div> </body> </html>
Astuces et conseils d'utilisation de la propriété perspective-origin CSS
- La propriété perspective-origin est souvent utilisée en conjonction avec la propriété perspective pour créer des effets de profondeur en 3D.
- Le point de vue par défaut est situé au centre de l'élément parent. En définissant un point de vue différent, vous pouvez créer des effets de perspective intéressants.
- La propriété perspective-origin ne fonctionne que sur les éléments positionnés en 3D, c'est-à-dire ceux pour lesquels la propriété transform est définie avec une valeur de transformation en 3D.
- Il est recommandé d'utiliser des valeurs en pixels pour définir le point de vue, car les pourcentages peuvent donner des résultats inattendus en fonction de la taille de l'élément parent.
- En combinant la propriété perspective-origin avec la propriété transform-origin, vous pouvez créer des effets de rotation en 3D.
Conclusion
La propriété CSS perspective-origin est un outil puissant pour créer des effets de perspective en 3D. En comprenant sa syntaxe et ses valeurs possibles, ainsi qu'en appliquant des astuces et conseils d'utilisation, vous pouvez créer des designs intéressants et dynamiques.
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
Explorateur | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
Verssion | 36 12.0-webkit- | 10 | 16.0 10.0 -moz- | 9.0 4.0.3 -webkit- | 23.0 15.0 -webkit- |