diff options
Diffstat (limited to 'files/fr/web/css/perspective-origin/index.md')
| -rw-r--r-- | files/fr/web/css/perspective-origin/index.md | 385 |
1 files changed, 385 insertions, 0 deletions
diff --git a/files/fr/web/css/perspective-origin/index.md b/files/fr/web/css/perspective-origin/index.md new file mode 100644 index 0000000000..8a8768ebf1 --- /dev/null +++ b/files/fr/web/css/perspective-origin/index.md @@ -0,0 +1,385 @@ +--- +title: perspective-origin +slug: Web/CSS/perspective-origin +tags: + - CSS + - Propriété + - Reference + - Transformations CSS +translation_of: Web/CSS/perspective-origin +--- +<div>{{CSSRef}}</div> + +<p>La propriété <strong><code>perspective-origin</code></strong> 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")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/perspective-origin.html")}}</div> + +<p>Les propriétés <code>perspective-origin</code> et {{cssxref("perspective")}} sont à rattacher à l'élément parent de l'élément qu'on veut placer dans un espace 3D. En revanche, la fonction <code><a href="/fr/docs/Web/CSS/transform-function/perspective">perspective()</a></code> s'applique à même l'élément qu'on veut placer en 3D.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush:css no-line-numbers">/* 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; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><em>x-position</em></dt> + <dd>Indique l'abscisse de la position du point de fuite. La valeur peut être : + <ul> + <li>De type {{cssxref("<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.</li> + <li><code>left</code> : un mot-clé qui est un alias pour indiquer une longueur nulle.</li> + <li><code>center</code> : un mot-clé qui est un alias pour indiquer une valeur de pourcentage de <code>50%</code>.</li> + <li><code>right</code> : un mot-clé qui est un alias pour indiquer un pourcentage de <code>100%</code>.</li> + </ul> + </dd> + <dt><em>y-position</em></dt> + <dd>Indique l'ordonnée de la position du point de fuite. La valeur peut être : + <ul> + <li>De type {{cssxref("<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.</li> + <li>De type {{cssxref("<length>")}} : la position est indiquée avec une valeur de longueur. La valeur peut être négative.</li> + <li><code>top</code> : un mot-clé qui est un alias pour indiquer une longueur nulle.</li> + <li><code>center</code> : un mot-clé qui est un alias pour indiquer une valeur de pourcentage de <code>50%</code>.</li> + <li><code>bottom</code> : un mot-clé qui est un alias pour indiquer un pourcentage de <code>100%</code>.</li> + </ul> + </dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +{{csssyntax}} + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Cubes_avec_des_valeurs_communes_pour_perspective-origin">Cubes avec des valeurs communes pour <code>perspective-origin</code></h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: 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> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: 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); +}</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample('Cubes_avec_des_valeurs_communes_pour_perspective-origin', 620, 800)}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("css.properties.perspective-origin")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS" title="CSS/Using_CSS_transforms">Utiliser les transformations CSS</a></li> + <li>{{cssxref('transform-style')}}</li> + <li>{{cssxref('transform-function')}}</li> + <li>{{cssxref('perspective')}}</li> + <li><a href="/fr/docs/Web/CSS/transform-function/perspective">La fonction de transformation <code>perspective()</code></a></li> +</ul> |