From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../css/transform-function/matrix3d()/index.html | 182 +++++++++++++++++++++ 1 file changed, 182 insertions(+) create mode 100644 files/fr/web/css/transform-function/matrix3d()/index.html (limited to 'files/fr/web/css/transform-function/matrix3d()/index.html') diff --git a/files/fr/web/css/transform-function/matrix3d()/index.html b/files/fr/web/css/transform-function/matrix3d()/index.html new file mode 100644 index 0000000000..0f638286b7 --- /dev/null +++ b/files/fr/web/css/transform-function/matrix3d()/index.html @@ -0,0 +1,182 @@ +--- +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