matrix3d()
==========

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 `<transform-function>`.

Syntaxe
-------

La fonction `matrix3d()` s'utilise avec 16 valeurs qui sont décrites dans l'ordre des colonnes.


```css
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 `<number>` qui sont les coefficients de la matrice définissant la transformation linéaire.

`a4` `b4 c4`

Les coefficients de type `<number>` qui définissent la translation à appliquer.


**Note :** Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs `<length>` pour les coefficients `a4`, `b4` et `c4`.


| Coordonnées cartésiennes sur ℝ2 | Coordonnées homogènes sur ℝℙ2 | Coordonnées cartésiennes sur ℝ3 | Coordonné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.
  | 

a1
a2
a3
a4

b1
b2
b3
b4

c1
c2
c3
c4

d1
d2
d3
d4

 |

Exemples
--------

### Exemple simple

#### HTML


```html
<p>toto</p>
<p class="transformation">truc</p>
```


#### CSS


```css
p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformation {
  transform: matrix3d(
    0.87,
    -0.5,
    0,
    0,
    0.5,
    0.87,
    0,
    0,
    0,
    0,
    1,
    0,
    0,
    0,
    0,
    1
  );
  background-color: blue;
}
```


#### Résultat

### Translation et homothétie matricielle

#### HTML


```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


```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

Spécifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-matrix3d |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `transform`
* `<transform-function>`
* Comprendre les matrices de transformations CSS (en anglais)