{{CSSRef}} {{SeeCompatTable}}
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é {{cssxref("perspective")}}.
{{cssinfo}}
Syntaxe
perspective-origin: x-position; /* une valeur */ perspective-origin: x-position y-position; /* deux valeurs */ /* 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 {{cssxref("<percentage>")}} : la position est indiquée relativement à la largeur de l'élément. La valeur peut être négative.
- De type {{cssxref("<length>")}} : la position est indiquée avec une valeur de longueur. 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%
.
- y-position
- Indique l'ordonnée de la position du point de fuite. La valeur peut être :
- De type {{cssxref("<percentage>")}} : la position est indiquée relativement à la hauteur de l'élément. La valeur peut être négative.
- De type {{cssxref("<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%
.
Syntaxe formelle
{{csssyntax}}
Exemples
Cubes avec des valeurs communes pour perspective-origin
HTML
<table> <tbody> <tr> <th><code>perspective-origin: top left;</code> </th> <th><code>perspective-origin: top;</code> </th> <th><code>perspective-origin: top right;</code> </th> </tr> <tr> <td> <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> </div> </td> <td> <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> </td> <td> <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> </td> </tr> <tr> <th><code>perspective-origin: left;</code> </th> <th><code>perspective-origin: 50% 50%;</code> </th> <th><code>perspective-origin: right;</code> </th> </tr> <tr> <td> <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> </td> <td> <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> </td> <td> <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> </td> </tr> <tr> <th><code>perspective-origin: bottom left;</code> </th> <th><code>perspective-origin: bottom;</code> </th> <th><code>perspective-origin: bottom right;</code> </th> </tr> <tr> <td> <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> </td> <td> <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> </td> <td> <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> </td> </tr> </tbody> </table>
CSS
/* On utilise des classes pour les valeurs de perspective-origin */ .potl { perspective-origin: top left; -webkit-perspective-origin: top left; } .potm { perspective-origin: top; -webkit-perspective-origin: top; } .potr { perspective-origin: top right; -webkit-perspective-origin: top right; } .poml { perspective-origin: left; -webkit-perspective-origin: left; } .pomm { perspective-origin: 50% 50%; -webkit-perspective-origin: 50% 50%; } .pomr { perspective-origin: right; -webkit-perspective-origin: right; } .pobl { perspective-origin: bottom left; -webkit-perspective-origin: bottom left; } .pobm { perspective-origin: bottom; -webkit-perspective-origin: bottom; } .pobr { perspective-origin: bottom right; -webkit-perspective-origin: bottom right; } /* On définit le div container, celui pour 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; -webkit-backface-visibility: visible; -webkit-perspective: 300px; -webkit-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 en fonction de la direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translateZ(50px); -webkit-transform: translateZ(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotateY(180deg) translateZ(50px); -webkit-transform: rotateY(180deg) translateZ(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotateY(90deg) translateZ(50px); -webkit-transform: rotateY(90deg) translateZ(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotateY(-90deg) translateZ(50px); -webkit-transform: rotateY(-90deg) translateZ(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotateX(90deg) translateZ(50px); -webkit-transform: rotateX(90deg) translateZ(50px) } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotateX(-90deg) translateZ(50px); -webkit-transform: rotateX(-90deg) translateZ(50px); } /* On améliore un peu le tableau */ th, p, td { background-color: #EEEEEE; padding: 10px; font-family: sans-serif; text-align: left; }
Résultat
{{EmbedLiveSample('Cubes_avec_des_valeurs_communes_pour_perspective-origin', 620, 800)}}
Spécifications
Spécification | Statut | Commentaires |
---|---|---|
{{SpecName('CSS3 Transforms', '#perspective-origin', 'perspective-origin')}} | {{Spec2('CSS3 Transforms')}} | Définition initiale. |
Compatibilité des navigateurs
{{CompatibilityTable}}
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Support simple | 12{{property_prefix('-webkit')}} | {{CompatGeckoDesktop("10")}}{{property_prefix('-moz')}} {{CompatGeckoDesktop("16")}} |
10 | 15 | {{CompatVersionUnknown}}{{property_prefix('-webkit')}} |
Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Support simple | 3.0{{property_prefix('-webkit')}} | {{CompatGeckoMobile("10")}}{{property_prefix('-moz')}} {{CompatGeckoMobile("16")}} |
8.1 | {{CompatVersionUnknown}}{{property_prefix('-webkit')}} | {{CompatVersionUnknown}}{{property_prefix('-webkit')}} |