Propriété CSS perspective-origin
La propriété perspective-origin définit la position depuis laquelle l'utilisateur regarde l'élément positionné en 3D.
La propriété perspective-origin est l'une des propriétés CSS3.
La propriété perspective utilise la valeur de perspective-origin comme point de fuite. Par défaut, le point de fuite d'un espace 3D se trouve au centre. La propriété perspective-origin peut être utilisée pour modifier la position du point de fuite.
La propriété perspective-origin doit être utilisée conjointement avec la propriété perspective sur le même élément ou un ancêtre pour prendre effet.
Lorsque deux valeurs ou plus sont spécifiées mais qu'aucune n'est un mot-clé, la première valeur décrit la position horizontale et la seconde décrit la position verticale. Si une seule valeur est définie, la seconde est supposée être la valeur centrale.
INFO
Seule l'élément enfant bénéficie d'une vue en perspective, pas l'élément lui-même.
| Valeur initiale | 50% 50% |
|---|---|
| S'applique à | Éléments transformables. |
| Héritée | Non. |
| Animable | Oui. La transformation de la perspective est animable. |
| Version | CSS3 |
| Syntaxe DOM | object.style.perspectiveOrigin = "20px 70%"; |
Syntaxe
Syntaxe CSS de perspective-origin
perspective-origin: x-position y-position | x | y | closest-side | farthest-side | initial | inherit;Exemple de la propriété perspective-origin :
Exemple de code CSS pour perspective-origin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 60px;
border: 1px solid #666;
perspective: 130px;
perspective-origin: 50% 50%;
}
.element2 {
padding: 50px;
position: absolute;
border: 1px solid #000;
background: #8ebf42;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Perspective-origin property example</h2>
<h3>Perspective-origin: 50% 50%:</h3>
<div class="element1">
Box1
<div class="element2">Box2</div>
</div>
</body>
</html>Résultat
Exemple de la propriété perspective-origin avec la valeur "left" :
Exemple de valeur "left" pour CSS perspective-origin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 20px;
border: 1px solid #666;
perspective: 80px;
perspective-origin: left;
}
.element2 {
padding: 50px;
position: absolute;
border: 1px solid #000;
background: #8ebf42;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Perspective-origin property example</h2>
<h3>Perspective-origin: left:</h3>
<div class="element1">
Box1
<div class="element2">Box2</div>
</div>
</body>
</html>Exemple de la propriété perspective-origin avec la valeur "right" :
Exemple de valeur "right" pour CSS perspective-origin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 160px;
border: 1px solid #666;
perspective: 80px;
perspective-origin: right;
}
.element2 {
padding: 50px;
position: absolute;
border: 1px solid #000;
background: #8ebf42;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Perspective-origin property example</h2>
<h3>Perspective-origin: right:</h3>
<div class="element1">
Box1
<div class="element2">Box2</div>
</div>
</body>
</html>Exemple de la propriété perspective-origin définie comme "bottom right" :
Exemple CSS pour perspective-origin en bas
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 60px;
border: 1px solid #666;
perspective: 130px;
perspective-origin: bottom right;
}
.element2 {
padding: 50px;
position: absolute;
border: 1px solid #000;
background: #8ebf42;
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<h2>Perspective-origin property example</h2>
<h3>Perspective-origin: bottom right:</h3>
<div class="element1">
Box1
<div class="element2">Box2</div>
</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| x-position | Spécifie la position de la vue sur l'axe x. Elle peut prendre les valeurs suivantes : - left, qui équivaut à une longueur de 0. - right, qui équivaut à 100 %. - center, qui équivaut à 50 %. - length - percentage. |
| y-position | Spécifie la position de la vue sur l'axe y. Elle peut prendre les valeurs suivantes : - top, qui équivaut à une longueur de 0. - center, qui équivaut à 50 %. - bottom, qui équivaut à 100 %. - length |
| x | Définit la position horizontale au centre (50 %). |
| y | Définit la position verticale au centre (50 %). |
| closest-side | Définit l'origine de la perspective sur le côté le plus proche de l'élément. |
| farthest-side | Définit l'origine de la perspective sur le côté le plus éloigné de l'élément. |
| initial | Définit cette propriété à sa valeur par défaut. |
| inherit | Hérite cette propriété de son élément parent. |
Pratique
Que fait la propriété CSS 'perspective-origin' ?