From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- .../transform-function/perspective()/index.html | 157 --------------------- .../css/transform-function/perspective()/index.md | 157 +++++++++++++++++++++ 2 files changed, 157 insertions(+), 157 deletions(-) delete mode 100644 files/fr/web/css/transform-function/perspective()/index.html create mode 100644 files/fr/web/css/transform-function/perspective()/index.md (limited to 'files/fr/web/css/transform-function/perspective()') diff --git a/files/fr/web/css/transform-function/perspective()/index.html b/files/fr/web/css/transform-function/perspective()/index.html deleted file mode 100644 index bc9eb31839..0000000000 --- a/files/fr/web/css/transform-function/perspective()/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: perspective() -slug: Web/CSS/transform-function/perspective() -tags: - - CSS - - Reference - - Transformations CSS -translation_of: Web/CSS/transform-function/perspective() ---- -
{{CSSRef}}
- -

La fonction perspective() définit la distance entre le plan d'équation z = 0 et l'œil de l'utilisateur afin de fournir une perspective aux éléments positionnés dans l'espace (3D). Chaque élément pour lequel z est positif apparaîtra plus grand et chaque élément pour lequel z est négatif apparaîtra plus petit. La « force » de cet effet est déterminée par la valeur de cette propriété. La valeur obtenue comme résultat de cette fonction est de type {{cssxref("<transform-function>")}}.

- -

Le résultat de cette fonction est une valeur de type {{cssxref("<transform-function>")}}.

- -
{{EmbedInteractiveExample("pages/css/function-perspective.html")}}
- -

La fonction de transformation perspective()s'applique à l'élément qu'on veut transformer. En revanche, les propriétés {{cssxref('perspective')}} et {{cssxref('perspective-origin')}} s'appliquent sur l'élément parent de l'enfant qu'on veut placer dans un espace 3D.

- -

Syntaxe

- -
perspective(l)
-
- -

Valeurs

- -
-
l
-
Une valeur de type {{cssxref("<length>")}} qui définit la distance entre l'œil de l'utilisateur et le plan décrit par l'équation z = 0. Si la valeur est nulle ou négative, aucune perspective ne sera appliquée.
-
- - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
-

Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.

- 		Une perspective n'est pas une transformation linéaire de ℝ3 et ne peut donc pas être représentée en utilisant une matrice du système cartésien. 10000100001000−1/d1
- -

Exemples

- -

Appliquer une perspective sur un objet 3D

- -

CSS

- -
.face {
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  line-height: 100px;
-  font-size: 100px;
-  text-align: center;
-}
-
-p + div {
-  width: 100px;
-  height: 100px;
-  transform-style: preserve-3d;
-  margin-left: 100px;
-}
-.no-perspective-box {
-  transform: rotateX(-15deg) rotateY(30deg);
-}
-
-.perspective-box-far {
-  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
-}
-
-.perspective-box-closer {
-  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
-}
-
-.top {
-  background-color: skyblue;
-  transform: rotateX(90deg) translate3d(0, 0, 50px);
-}
-
-.left {
-  background-color: pink;
-  transform: rotateY(-90deg) translate3d(0, 0, 50px);
-}
-
-.front {
-  background-color: limegreen;
-  transform: translate3d(0, 0, 50px);
-}
-
- -

HTML

- -
<p>Sans perspective :</p>
-<div class="no-perspective-box">
-  <div class="face front">A</div>
-  <div class="face top">B</div>
-  <div class="face left">C</div>
-</div>
-
-<p>Avec une perspective (9cm) :</p>
-<div class="perspective-box-far">
-  <div class="face front">A</div>
-  <div class="face top">B</div>
-  <div class="face left">C</div>
-</div>
-
-<p>Avec une perspective (4cm) :</p>
-<div class="perspective-box-closer">
-  <div class="face front">A</div>
-  <div class="face top">B</div>
-  <div class="face left">C</div>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample('Appliquer_une_perspective_sur_un_objet_3D', '100%', '350', '', 'Web/CSS/transform-function/perspective')}}

- -

Spécifications

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

Compatibilité des navigateurs

- -

Voir la page sur le type de donnée <transform-function> pour les informations de compatibilité associées.

- -

Voir aussi

- - diff --git a/files/fr/web/css/transform-function/perspective()/index.md b/files/fr/web/css/transform-function/perspective()/index.md new file mode 100644 index 0000000000..bc9eb31839 --- /dev/null +++ b/files/fr/web/css/transform-function/perspective()/index.md @@ -0,0 +1,157 @@ +--- +title: perspective() +slug: Web/CSS/transform-function/perspective() +tags: + - CSS + - Reference + - Transformations CSS +translation_of: Web/CSS/transform-function/perspective() +--- +
{{CSSRef}}
+ +

La fonction perspective() définit la distance entre le plan d'équation z = 0 et l'œil de l'utilisateur afin de fournir une perspective aux éléments positionnés dans l'espace (3D). Chaque élément pour lequel z est positif apparaîtra plus grand et chaque élément pour lequel z est négatif apparaîtra plus petit. La « force » de cet effet est déterminée par la valeur de cette propriété. La valeur obtenue comme résultat de cette fonction est de type {{cssxref("<transform-function>")}}.

+ +

Le résultat de cette fonction est une valeur de type {{cssxref("<transform-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-perspective.html")}}
+ +

La fonction de transformation perspective()s'applique à l'élément qu'on veut transformer. En revanche, les propriétés {{cssxref('perspective')}} et {{cssxref('perspective-origin')}} s'appliquent sur l'élément parent de l'enfant qu'on veut placer dans un espace 3D.

+ +

Syntaxe

+ +
perspective(l)
+
+ +

Valeurs

+ +
+
l
+
Une valeur de type {{cssxref("<length>")}} qui définit la distance entre l'œil de l'utilisateur et le plan décrit par l'équation z = 0. Si la valeur est nulle ou négative, aucune perspective ne sera appliquée.
+
+ + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+

Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.

+ 		Une perspective n'est pas une transformation linéaire de ℝ3 et ne peut donc pas être représentée en utilisant une matrice du système cartésien. 10000100001000−1/d1
+ +

Exemples

+ +

Appliquer une perspective sur un objet 3D

+ +

CSS

+ +
.face {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  font-size: 100px;
+  text-align: center;
+}
+
+p + div {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  margin-left: 100px;
+}
+.no-perspective-box {
+  transform: rotateX(-15deg) rotateY(30deg);
+}
+
+.perspective-box-far {
+  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
+}
+
+.perspective-box-closer {
+  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
+}
+
+.top {
+  background-color: skyblue;
+  transform: rotateX(90deg) translate3d(0, 0, 50px);
+}
+
+.left {
+  background-color: pink;
+  transform: rotateY(-90deg) translate3d(0, 0, 50px);
+}
+
+.front {
+  background-color: limegreen;
+  transform: translate3d(0, 0, 50px);
+}
+
+ +

HTML

+ +
<p>Sans perspective :</p>
+<div class="no-perspective-box">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+<p>Avec une perspective (9cm) :</p>
+<div class="perspective-box-far">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+<p>Avec une perspective (4cm) :</p>
+<div class="perspective-box-closer">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Appliquer_une_perspective_sur_un_objet_3D', '100%', '350', '', 'Web/CSS/transform-function/perspective')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Transforms 2", "#funcdef-perspective", "perspective()")}}{{Spec2("CSS Transforms 2")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

Voir la page sur le type de donnée <transform-function> pour les informations de compatibilité associées.

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf