perspective-origin
Baseline 2022
Newly available
Since March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
La propriété perspective-origin
détermine la poisition depuis laquelle le spectateur regarde le document. Elle est utilisée comme point de fuite par la propriété perspective
.
Exemple interactif
Les propriétés perspective-origin
et perspective
sont à rattacher à l'élément parent de l'élément qu'on veut placer dans un espace 3D. En revanche, la fonction perspective()
s'applique à même l'élément qu'on veut placer en 3D.
Syntaxe
/* Syntaxe avec une valeur */
perspective-origin: x-position;
/* Syntaxe avec deux valeurs */
perspective-origin: x-position y-position;
/* Lorsque x-position et y-position sont des mots-clés */
/* on peut aussi avoir la forme suivante valide */
perspective-origin: y-position x-position;
/* Valeurs globales */
perspective-origin: inherit;
perspective-origin: initial;
perspective-origin: unset;
Valeurs
- x-position
-
Indique l'abscisse de la position du point de fuite. La valeur peut être :
- De type
<length-percentage>
: la position est indiquée comme une longueur absolue ou relativement à la largeur de l'élément. La valeur peut être négative. left
: un mot-clé qui est un alias pour indiquer une longueur nulle.center
: un mot-clé qui est un alias pour indiquer une valeur de pourcentage de50%
.right
: un mot-clé qui est un alias pour indiquer un pourcentage de100%
.
- De type
- y-position
-
Indique l'ordonnée de la position du point de fuite. La valeur peut être :
- De type
<length-percentage>
: la position est indiquée comme une longueur absolue ou relativement à la hauteur de l'élément. La valeur peut être négative. - De type
<length>
: la position est indiquée avec une valeur de longueur. La valeur peut être négative. top
: un mot-clé qui est un alias pour indiquer une longueur nulle.center
: un mot-clé qui est un alias pour indiquer une valeur de pourcentage de50%
.bottom
: un mot-clé qui est un alias pour indiquer un pourcentage de100%
.
- De type
Définition formelle
Valeur initiale | 50% 50% |
---|---|
Applicabilité | éléments transformables |
Héritée | non |
Pourcentages | se rapporte à la taille de la boîte de l'élément |
Valeur calculée | pour une valeur de type length sa valeur absolue, sinon un pourcentage |
Type d'animation | simple list of length, percentage, or calc |
Syntaxe formelle
perspective-origin =
<position>
<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<length-percentage> =
<length> |
<percentage>
Exemples
Cubes avec des valeurs communes pour perspective-origin
HTML
<section>
<figure>
<caption><code>perspective-origin: top left;</code></caption>
<div class="container">
<div class="cube potl">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</figure>
<figure>
<caption><code>perspective-origin: top;</code></caption>
<div class="container">
<div class="cube potm">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<caption><code>perspective-origin: top right;</code></caption>
<div class="container">
<div class="cube potr">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<caption><code>perspective-origin: left;</code></caption>
<div class="container">
<div class="cube poml">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<caption><code>perspective-origin: 50% 50%;</code></caption>
<div class="container">
<div class="cube pomm">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<caption><code>perspective-origin: right;</code></caption>
<div class="container">
<div class="cube pomr">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<caption><code>perspective-origin: bottom left;</code></caption>
<div class="container">
<div class="cube pobl">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<caption><code>perspective-origin: bottom;</code></caption>
<div class="container">
<div class="cube pobm">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<caption><code>perspective-origin: bottom right;</code></caption>
<div class="container">
<div class="cube pobr">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<caption><code>perspective-origin: -200% -200%;</code></caption>
<div class="container">
<div class="cube po200200neg">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<caption><code>perspective-origin: 200% 200%;</code></caption>
<div class="container">
<div class="cube po200200pos">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<caption><code>perspective-origin: 200% -200%;</code></caption>
<div class="container">
<div class="cube po200200">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
</section>
CSS
/* Valeurs de perspective-origin (uniques pour chaque exemple) */
.potl {
perspective-origin: top left;
}
.potm {
perspective-origin: top;
}
.potr {
perspective-origin: top right;
}
.poml {
perspective-origin: left;
}
.pomm {
perspective-origin: 50% 50%;
}
.pomr {
perspective-origin: right;
}
.pobl {
perspective-origin: bottom left;
}
.pobm {
perspective-origin: bottom;
}
.pobr {
perspective-origin: bottom right;
}
.po200200neg {
perspective-origin: -200% -200%;
}
.po200200pos {
perspective-origin: 200% 200%;
}
.po200200 {
perspective-origin: 200% -200%;
}
/* On définit le conteneur, le cube et une face générique */
.container {
width: 100px;
height: 100px;
margin: 24px;
border: none;
}
.cube {
width: 100%;
height: 100%;
backface-visibility: visible;
perspective: 300px;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}
/* On définit chaque face */
.front {
background: rgba(0, 0, 0, 0.3);
transform: translateZ(50px);
}
.back {
background: rgba(0, 255, 0, 1);
color: black;
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(196, 0, 0, 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(0, 0, 196, 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(196, 196, 0, 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgba(196, 0, 196, 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
/* On améliore la disposition */
section {
background-color: #eee;
padding: 10px;
font-family: sans-serif;
text-align: left;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Résultat
Spécifications
Specification |
---|
CSS Transforms Module Level 2 # perspective-origin-property |
Compatibilité des navigateurs
BCD tables only load in the browser