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 --- .../web/css/transform-function/matrix3d()/index.md | 155 +++++++++++---------- 1 file changed, 81 insertions(+), 74 deletions(-) (limited to 'files/fr/web/css/transform-function/matrix3d()') diff --git a/files/fr/web/css/transform-function/matrix3d()/index.md b/files/fr/web/css/transform-function/matrix3d()/index.md index 3090f30633..437115670e 100644 --- a/files/fr/web/css/transform-function/matrix3d()/index.md +++ b/files/fr/web/css/transform-function/matrix3d()/index.md @@ -7,57 +7,76 @@ tags: - Transformations CSS translation_of: Web/CSS/transform-function/matrix3d() --- -
{{CSSRef}}
+{{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>")}}.

+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

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

Valeurs

+### 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.
-
+- _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.

-
+> **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
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

+## Exemples -

Exemple simple

+### Exemple simple -

HTML

+#### HTML -
<p>toto</p>
-<p class="transformation">truc</p>
+```html +

toto

+

truc

+``` -

CSS

+#### CSS -
p {
+```css
+p {
   width: 50px;
   height: 50px;
   background-color: teal;
@@ -67,26 +86,28 @@ translation_of: Web/CSS/transform-function/matrix3d()
   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

+#### Résultat -

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

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

Translation et homothétie matricielle

+### Translation et homothétie matricielle -

HTML

+#### HTML -
<div class="foo">
+```html
+

  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

+#### CSS -
html {
+```css
+html {
   width: 100%;
 }
 body {
@@ -146,39 +167,25 @@ body {
       50,100,0,1.1
     )
   }
-}
+} +``` -

Résultat

+#### Résultat -

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

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

Spécifications

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

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

+Voir la page sur le type de donnée [``](/fr/docs/Web/CSS/transform-function#compatibilité_des_navigateurs) pour les informations de compatibilité associées. -

Voir aussi

+## Voir aussi - +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- [Comprendre les matrices de transformations CSS (en anglais)](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/) -- cgit v1.2.3-54-g00ecf