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 --- .../css/transform-function/matrix3d()/index.html | 184 --------------------- .../web/css/transform-function/matrix3d()/index.md | 184 +++++++++++++++++++++ 2 files changed, 184 insertions(+), 184 deletions(-) delete mode 100644 files/fr/web/css/transform-function/matrix3d()/index.html create mode 100644 files/fr/web/css/transform-function/matrix3d()/index.md (limited to 'files/fr/web/css/transform-function/matrix3d()') diff --git a/files/fr/web/css/transform-function/matrix3d()/index.html b/files/fr/web/css/transform-function/matrix3d()/index.html deleted file mode 100644 index 3090f30633..0000000000 --- a/files/fr/web/css/transform-function/matrix3d()/index.html +++ /dev/null @@ -1,184 +0,0 @@ ---- -title: matrix3d() -slug: Web/CSS/transform-function/matrix3d() -tags: - - CSS - - Reference - - Transformations CSS -translation_of: Web/CSS/transform-function/matrix3d() ---- -
{{CSSRef}}
- -

La fonction matrix3d() décrit une transformation en trois dimensions sous la forme d'une matrice homogène (4x4). Les 16 paramètres passés à la fonction sont listés par ligne puis par colonne. Le résultat de cette fonction est une valeur de type {{cssxref("<transform-function>")}}.

- -

Syntaxe

- -
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
- -

Valeurs

- -
-
a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 d4
-
Des valeurs de type {{cssxref("<number>")}} qui sont les coefficients de la matrice définissant la transformation linéaire.
-
a4 b4 c4
-
Les coefficients de type {{cssxref("<number>")}} qui définissent la translation à appliquer.
-
- -
-

Note : Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("<length>")}} pour les coefficients a4, b4 et c4.

-
- - - - - - - - - - - - - - - - - -
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.Les matrices exprimées avec des coordonnées cartésiennes ne permettent pas de représenter des transformations 3D affines car les translations ne sont pas des transformations linéaires.a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4
- -

Exemples

- -

Exemple simple

- -

HTML

- -
<p>toto</p>
-<p class="transformation">truc</p>
- -

CSS

- -
p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformation{
-  transform: matrix3d(0.87,-0.5,0.00,0,0.50,0.87,0.00,0,0,0,1,0,0,0,0,1);
-  background-color: blue;
-}
-
- -

Résultat

- -

{{EmbedLiveSample("Exemple_simple","100%","200")}}

- -

Translation et homothétie matricielle

- -

HTML

- -
<div class="foo">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
- Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere
- necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
-</div>
-
- -

CSS

- -
html {
-  width: 100%;
-}
-body {
-  height: 100vh;
-  /* Centering content */
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-  align-content: center;
-
-}
-.foo {
-  width: 50%;
-  padding: 1em;
-  color: white;
-  background: #ff8c66;
-  border: 2px dashed black;
-  text-align: center;
-  font-family: system-ui, sans-serif;
-  font-size: 14px;
-   /* Setting up animation for better demonstration */
-  animation: MotionScale 2s alternate linear infinite;
-}
-
-@keyframes MotionScale {
-  from {
-    /*
-      Identity matrix is used as basis here.
-      The matrix below describes the
-      following transformations:
-        Translates every X point by -50px
-        Translates every Y point by -100px
-        Translates every Z point by 0
-        Scales down by 10%
-    */
-    transform: matrix3d(
-      1,0,0,0,
-      0,1,0,0,
-      0,0,1,0,
-      -50,-100,0,1.1
-    );
-
-  }
-  50% {
-    transform: matrix3d(
-      1,0,0,0,
-      0,1,0,0,
-      0,0,1,0,
-      0,0,0,0.9
-    );
-  }
-  to {
-     transform: matrix3d(
-      1,0,0,0,
-      0,1,0,0,
-      0,0,1,0,
-      50,100,0,1.1
-    )
-  }
-}
- -

Résultat

- -

{{EmbedLiveSample('Translation_et_homothétie_matricielle', '100%', '400px')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Transforms 2", "#funcdef-matrix3d", "matrix3d()")}}{{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/matrix3d()/index.md b/files/fr/web/css/transform-function/matrix3d()/index.md new file mode 100644 index 0000000000..3090f30633 --- /dev/null +++ b/files/fr/web/css/transform-function/matrix3d()/index.md @@ -0,0 +1,184 @@ +--- +title: matrix3d() +slug: Web/CSS/transform-function/matrix3d() +tags: + - CSS + - Reference + - Transformations CSS +translation_of: Web/CSS/transform-function/matrix3d() +--- +
{{CSSRef}}
+ +

La fonction matrix3d() décrit une transformation en trois dimensions sous la forme d'une matrice homogène (4x4). Les 16 paramètres passés à la fonction sont listés par ligne puis par colonne. Le résultat de cette fonction est une valeur de type {{cssxref("<transform-function>")}}.

+ +

Syntaxe

+ +
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
+ +

Valeurs

+ +
+
a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 d4
+
Des valeurs de type {{cssxref("<number>")}} qui sont les coefficients de la matrice définissant la transformation linéaire.
+
a4 b4 c4
+
Les coefficients de type {{cssxref("<number>")}} qui définissent la translation à appliquer.
+
+ +
+

Note : Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("<length>")}} pour les coefficients a4, b4 et c4.

+
+ + + + + + + + + + + + + + + + + +
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.Les matrices exprimées avec des coordonnées cartésiennes ne permettent pas de représenter des transformations 3D affines car les translations ne sont pas des transformations linéaires.a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4
+ +

Exemples

+ +

Exemple simple

+ +

HTML

+ +
<p>toto</p>
+<p class="transformation">truc</p>
+ +

CSS

+ +
p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation{
+  transform: matrix3d(0.87,-0.5,0.00,0,0.50,0.87,0.00,0,0,0,1,0,0,0,0,1);
+  background-color: blue;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_simple","100%","200")}}

+ +

Translation et homothétie matricielle

+ +

HTML

+ +
<div class="foo">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere
+ necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
+</div>
+
+ +

CSS

+ +
html {
+  width: 100%;
+}
+body {
+  height: 100vh;
+  /* Centering content */
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-content: center;
+
+}
+.foo {
+  width: 50%;
+  padding: 1em;
+  color: white;
+  background: #ff8c66;
+  border: 2px dashed black;
+  text-align: center;
+  font-family: system-ui, sans-serif;
+  font-size: 14px;
+   /* Setting up animation for better demonstration */
+  animation: MotionScale 2s alternate linear infinite;
+}
+
+@keyframes MotionScale {
+  from {
+    /*
+      Identity matrix is used as basis here.
+      The matrix below describes the
+      following transformations:
+        Translates every X point by -50px
+        Translates every Y point by -100px
+        Translates every Z point by 0
+        Scales down by 10%
+    */
+    transform: matrix3d(
+      1,0,0,0,
+      0,1,0,0,
+      0,0,1,0,
+      -50,-100,0,1.1
+    );
+
+  }
+  50% {
+    transform: matrix3d(
+      1,0,0,0,
+      0,1,0,0,
+      0,0,1,0,
+      0,0,0,0.9
+    );
+  }
+  to {
+     transform: matrix3d(
+      1,0,0,0,
+      0,1,0,0,
+      0,0,1,0,
+      50,100,0,1.1
+    )
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Translation_et_homothétie_matricielle', '100%', '400px')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Transforms 2", "#funcdef-matrix3d", "matrix3d()")}}{{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