---
layout: layouts/math.njk
title: Transformation
date: Last Modified
type: post
eleventyComputed:
meta:
author:
name: "{{ metadata.author.name }}"
published: "{{ date | iso8601 }}"
modified: "{% if updateDate %}{{ updateDate | iso8601 }}{% endif %}"
---
## Matrice
La matrice permet d'effectuer n'importe quelle transformation en appliquant sur les coordonnées de la forme d'origine 2 équations.
$$
x' = a\times x + c\times y + e
$$
$$
y' = b\times x + d\times y + f
$$
la fonction matrice possède 6 paramètres `matrix(a b c d e f)`
$$
Transformation =
\begin{bmatrix}
a & c & e \\\
b & d & f
\end{bmatrix}
$$
## Translation
```svg
```
$$
Translation =
\begin{bmatrix}
1 & 0 & 30 \\\
0 & 1 & 40
\end{bmatrix}
$$
$$
x' = x + 30
$$
$$
y' = y + 40
$$
## Rotation
```svg
```
$$
Rotation = \begin{bmatrix}
cos(\alpha) & -sin(\alpha) & 0 \\\
sin(\alpha) & cos(\alpha) & 0
\end{bmatrix}
$$
$$
x' = x\times cos(\alpha) - y\times sin(\alpha)
$$
$$
y' = x\times sin(\alpha) + y\times cos(\alpha)
$$
## Échelle
```svg
```
$$
Échelle =
\begin{bmatrix}
0.5 & 0 & 0 \\\
0 & 0.5 & 0
\end{bmatrix}
$$
$$
x' = x\times0.5
$$
$$
y' = y\times0.5
$$
## Inclinaison ou cisaillement
```svg
```
$$
Inclinaison =
\begin{bmatrix}
1 & tan(\alpha) & 0 \\\
0 & 1 & 0
\end{bmatrix}
$$
$$
x' = x + y\times tan(\alpha)
$$
$$
y' = y
$$
### Y
$$
Inclinaison =
\begin{bmatrix}
1 & 0 & 0 \\\
tan(\alpha) & 1 & 0
\end{bmatrix}
$$
$$
x' = x + y\times tan(\alpha)
$$
$$
y' = y
$$
## Multiples transformations
Les transformations peuvent être combinés en les ajoutant les unes à la suite des autres.
Attention toutefois le système de coordonnées tout entier est transformé lui aussi
```svg
```
Le déplacement en x de 40px s'effectue suivant le nouvel axe x qui a subit lui aussi une rotation de 30°
### Multiplication de matrice
La multiplication de matrice s'effectue en
$$
Resultant =
\begin{bmatrix}
a & c & e \\\
b & d & f \\\
0 & 0 & 1
\end{bmatrix}
\times
\begin{bmatrix}
a' & c' & e' \\\
b' & d' & f' \\\
0 & 0 & 1
\end{bmatrix} =
\begin{bmatrix}
a\times a' + c \times b' &
a \times c' + c \times d' &
a \times e' + c \times f' + e \\\
b\times a' + d \times b' &
b \times c' + d \times d' &
b \times e' + d \times f' + f \\\
0 & 0 & 1
\end{bmatrix}
$$
$$
Transformation = \begin{bmatrix}
cos(30) & -sin(30) & 0 \\\
sin(30) & cos(30) & 0 \\\
0 & 0 & 1
\end{bmatrix}
\times
\begin{bmatrix}
1 & 0 & 40 \\\
0 & 1 & 0 \\\
0 & 0 & 1
\end{bmatrix} = \begin{bmatrix}
cos(30) &
-sin(30) &
cos(30) \times 40 \\\
sin(30) &
cos(30) &
sin(30) \times 40 \\\
0 & 0 & 1\end{bmatrix}
$$
## Origine de la transformation
la propriété `transform-origin` permet de sélectionner l'origine de la transformation. C'est très utile dans le cas des rotations.
```svg
```
L'origine de la transformation est située au milieu du carré.
[Projection isométrique](isometric)