La perspective-originpropriété détermine l'origine de la perspectivepropriété. Considérez-le comme le point de fuite de l'espace 3D actuel.
Notez que pour la perspectivepropriété, perspective-origindoit être définie sur l'élément parent afin de donner de la profondeur aux enfants transformés.
La perspective-originpropriété ne fait rien par elle-même. Il doit être défini sur un élément avec perspective.
/** * Syntax * perspective-origin: x-position * perspective-origin: x-position y-position * * perspective-origin:
| | constants | inherit */ .element1 ( perspective-origin: 25% 75%; ) .element2 ( perspective-origin: 10px 25px; ) .element3 ( perspective-origin: left bottom; ) Vous trouverez ci-dessous une démonstration montrant comment un cube 3D se comporte lors de la modification de son point de fuite en modifiant la perspective-originvaleur (constantes).
Hé, animons la perspective-origine, juste pour le plaisir!
- Il commence à «0% 0%» (en haut à gauche)
- Puis allez à «100% 0%» (en haut à droite)
- Puis à «100% 100%» (en bas à droite)
- Puis à «0% 100%» (en bas à gauche)
- Revenez ensuite à 1. et redémarrez
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 12 * | dix* | 11 | 12 | 4 * |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |