From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/perspective-origin/index.md | 492 +++++++++++++-------------- 1 file changed, 239 insertions(+), 253 deletions(-) (limited to 'files/fr/web/css/perspective-origin') diff --git a/files/fr/web/css/perspective-origin/index.md b/files/fr/web/css/perspective-origin/index.md index 8a8768ebf1..8e3ed90c2a 100644 --- a/files/fr/web/css/perspective-origin/index.md +++ b/files/fr/web/css/perspective-origin/index.md @@ -8,17 +8,18 @@ tags: - Transformations CSS translation_of: Web/CSS/perspective-origin --- -
{{CSSRef}}
+{{CSSRef}} -

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")}}.

+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")}}. -
{{EmbedInteractiveExample("pages/css/perspective-origin.html")}}
+{{EmbedInteractiveExample("pages/css/perspective-origin.html")}} -

Les propriétés perspective-origin 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 perspective() s'applique à même l'élément qu'on veut placer en 3D.

+Les propriétés `perspective-origin` 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 [`perspective()`](/fr/docs/Web/CSS/transform-function/perspective) s'applique à même l'élément qu'on veut placer en 3D. -

Syntaxe

+## Syntaxe -
/* Syntaxe avec une valeur */
+```css
+/* Syntaxe avec une valeur */
 perspective-origin: x-position;
 
 /* Syntaxe avec deux valeurs */
@@ -32,216 +33,215 @@ perspective-origin: y-position x-position;
 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("<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 de 50%.
    • -
  • right : un mot-clé qui est un alias pour indiquer un pourcentage de 100%.
    • -
-
-
y-position
-
Indique l'ordonnée de la position du point de fuite. La valeur peut être : -
    -
  • 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.
    • -
  • 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 de 50%.
    • -
  • bottom : un mot-clé qui est un alias pour indiquer un pourcentage de 100%.
    • -
-
-
- -

Syntaxe formelle

+``` + +### Valeurs + +- _x-position_ + + - : Indique l'abscisse de la position du point de fuite. La valeur peut être : + + - 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. + - `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 de `50%`. + - `right` : un mot-clé qui est un alias pour indiquer un pourcentage de `100%`. + +- _y-position_ + + - : Indique l'ordonnée de la position du point de fuite. La valeur peut être : + + - 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. + - 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 de `50%`. + - `bottom` : un mot-clé qui est un alias pour indiquer un pourcentage de `100%`. + +### Syntaxe formelle {{csssyntax}} -

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) */
+## Exemples
+
+### Cubes avec des valeurs communes pour `perspective-origin`
+
+#### HTML
+
+```html
+

+

+  perspective-origin: top left;
+    

+    

+      
1

+      
2

+      
3

+      
4

+      
5

+      
6

+    

+

+
+

+  perspective-origin: top;
+   

+    

+      
1

+      
2

+      
3

+      
4

+      
5

+      
6

+    

+  

+

+
+

+  perspective-origin: top right;
+  

+    

+      
1

+      
2

+      
3

+      
4

+      
5

+      
6

+    

+  

+

+
+

+  perspective-origin: left;
+  

+    

+      
1

+      
2

+      
3

+      
4

+      
5

+      
6

+    

+  

+

+
+

+  perspective-origin: 50% 50%;
+  

+    

+      
1

+      
2

+      
3

+      
4

+      
5

+      
6

+    

+  

+

+
+

+  perspective-origin: right;
+  

+    

+      
1

+      
2

+      
3

+      
4

+      
5

+      
6

+    

+  

+

+
+

+  perspective-origin: bottom left;
+  

+    

+      
1

+      
2

+      
3

+      
4

+      
5

+      
6

+    

+  

+

+
+

+  perspective-origin: bottom;
+  

+    

+      
1

+      
2

+      
3

+      
4

+      
5

+      
6

+    

+  

+

+
+

+  perspective-origin: bottom right;
+  

+    

+      
1

+      
2

+      
3

+      
4

+      
5

+      
6

+    

+  

+

+
+

+  perspective-origin: -200% -200%;
+  

+    

+      
1

+      
2

+      
3

+      
4

+      
5

+      
6

+    

+  

+

+
+

+  perspective-origin: 200% 200%;
+  

+    

+      
1

+      
2

+      
3

+      
4

+      
5

+      
6

+    

+  

+

+
+

+  perspective-origin: 200% -200%;
+  

+    

+      
1

+      
2

+      
3

+      
4

+      
5

+      
6

+    

+  

+

+
+

+```
+
+#### CSS
+
+```css
+/* Valeurs de perspective-origin (uniques pour chaque exemple) */
 .potl {
   perspective-origin: top left;
 }
@@ -343,43 +343,29 @@ section {
   text-align: left;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-}
- -

Résultat

- -

{{EmbedLiveSample('Cubes_avec_des_valeurs_communes_pour_perspective-origin', 620, 800)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}}{{Spec2('CSS Transforms 2')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.perspective-origin")}}

- -

Voir aussi

- - +} +``` + +#### Résultat + +{{EmbedLiveSample('Cubes_avec_des_valeurs_communes_pour_perspective-origin', 620, 800)}} + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}} | {{Spec2('CSS Transforms 2')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.perspective-origin")}} + +## Voir aussi + +- [Utiliser les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS "CSS/Using_CSS_transforms") +- {{cssxref('transform-style')}} +- {{cssxref('transform-function')}} +- {{cssxref('perspective')}} +- [La fonction de transformation `perspective()`](/fr/docs/Web/CSS/transform-function/perspective) -- cgit v1.2.3-54-g00ecf