Le langage CSS/Transformation géométrique

Le modèle de boîte

Techniques avancées

Le langage CSS

Introduction
- Premier exemple
- Structure et syntaxe
- Les sélecteurs
- Valeurs et unités utilisées
Mise en forme
Mise en page
Pour aller plus loin
Annexes

Version imprimable

[ Modifier le sommaire ]

Le modèle de boîte

Techniques avancées

Le langage CSS permet de transformer la représentation géométrique des éléments :

Translation,
Rotation,
Changer d'échelle, étirer, réduire,
...

Propriété transform

La propriété transform modifie l'espace de coordonnées utilisé pour la mise en forme visuelle : translation, rotation, homothétie, distortion pour changer la perspective^[1]. La valeur est définie comme une séquence de fonction transformant l'espace de coordonnées :

translateX(dx): Translation horizontale.
translateY(dy): Translation verticale.
translateZ(dz): Translation en profondeur.
translate(dx, dy): Translation horizontale et verticale.
translate3d(dx, dy, dz): Translation horizontale, verticale et en profondeur^[2].
perspective(distance): Distance d'observation pour la perspective. Une profondeur (Z) plus grande que zéro rapproche l'objet tandis qu'une distance plus petite l'éloigne.
scaleX(sx): Modifie l'échelle horizontale.
scaleY(sy): Modifie l'échelle verticale.
scaleZ(sz): Modifie l'échelle de profondeur.
scale(sx, sy): Modifie l'échelle horizontale et verticale^[3].
scale3d(sx, sy, sz): Modifie l'échelle horizontale, verticale et de profondeur^[4].
rotate(angle): Tourne la représentation du nombre spécifié dans le sens horaire, autour du point origine (0,0 par défaut).
rotate3d(x, y, z, a): Tourne la représentation du nombre a spécifié dans le sens horaire autour de l'axe défini par le vecteur (x, y, z) partant du point origine (0,0 par défaut).
skewX(ax): Inclinaison dans le sens horizontal.
skewY(ay): Inclinaison dans le sens vertical.
skew(ax, ay): Inclinaison dans les sens horizontal et vertical^[5].
matrice(a, b, c, d, tx, ty): Définit une matrice de transformation géométrique 2D^[6].; matrix(a, b, c, d, tx, ty) est une notation raccourcie, équivalente à matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).; Voir la section Représentation matricielle ci-dessous.
matrice3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4): Définit une matrice de transformation géométrique 3D^[7].; Voir la section Représentation matricielle ci-dessous.

Exemple 1

transform: translateX(10px) rotate(10deg) translateY(5px);

Avant transformation P	Après transformation P

Exemple 2

transform: scale(3.0, 0.5);

Avant transformation P	Après transformation P

Exemple 3

transform: skew(15deg, 5deg);

Avant transformation P	Après transformation P

Exemple 4

transform: perspective(500px) rotate3d(1,0,0,65deg);

Avant transformation Cet effet rappelle la présentation en introduction d'une certaine saga intergalactique...	Après transformation Cet effet rappelle la présentation en introduction d'une certaine saga intergalactique...

Représentation matricielle

Toutes les fonctions de transformation géométrique 2D et 3D sont représentables par une matrice de transformation. L'application de plusieurs transformations successives peut se résumer à une seule matrice appliquée aux coordonnées de la représentation géométrique.

Matrice 2D

En 2D, les coordonnées (x,y) d'un point peuvent être représentées par une matrice : ${\begin{bmatrix}x\\y\\1\end{bmatrix}}$

Le nouveau point est calculé en multipliant la matrice du point originale par la matrice de transformation. La constante 1 dans la matrice des points est utilisée lors de la multiplication matricielle comme coefficient pour le vecteur de translation.

La matrice créée par matrice(a, b, c, d, tx, ty) est : ${\begin{bmatrix}a&c&tx\\b&d&ty\\0&0&1\end{bmatrix}}$

La dernière ligne contient toujours (0, 0, 1) afin que la multiplication matricielle génère la constante 1 dans la matrice des coordonnées du point résultant.

Le nouveau point est calculé en multipliant la matrice du point originale par la matrice de transformation :

{\begin{bmatrix}x'\\y'\\1\end{bmatrix}}={\begin{bmatrix}a&c&tx\\b&d&ty\\0&0&1\end{bmatrix}}\cdot {\begin{bmatrix}x\\y\\1\end{bmatrix}}

{\begin{bmatrix}x'=a\times x+c\times y+tx\times 1\\y'=b\times x+d\times y+ty\times 1\\1=0\times x+0\times y+1\times 1\end{bmatrix}}

Chaque transformation géométrique correspond à une matrice.

Fonction de transformation	Matrice équivalente
`matrice(a, b, c, d, tx, ty)`	${\begin{bmatrix}a&c&tx\\b&d&ty\\0&0&1\end{bmatrix}}$
`translate(tx, ty)`	${\begin{bmatrix}1&0&tx\\0&1&ty\\0&0&1\end{bmatrix}}$
`scale(sx, sy)`	${\begin{bmatrix}sx&0&0\\0&sy&0\\0&0&1\end{bmatrix}}$
`rotate(a)`	${\begin{bmatrix}cos(a)&-sin(a)&0\\sin(a)&cos(a)&0\\0&0&1\end{bmatrix}}$
`skew(ax, ay)`	${\begin{bmatrix}1&tan(ax)&0\\tan(ay)&1&0\\0&0&1\end{bmatrix}}$

Une séquence de transformations correspond à la matrice résultant de la multiplication des matrices correspondantes.

Matrice 3D

En 3D, les coordonnées (x,y,z) d'un point peuvent également être représentées par une matrice : ${\begin{bmatrix}x\\y\\z\\1\end{bmatrix}}$

La matrice créée par matrice3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) comporte 16 coefficients : ${\begin{bmatrix}a1&a2&a3&a4\\b1&b2&b3&b4\\c1&c2&c3&c4\\d1&d2&d3&d4\end{bmatrix}}$

La matrice 3D équivalente à celle créée par matrice(a, b, c, d, tx, ty) est : ${\begin{bmatrix}a&c&0&tx\\b&d&0&ty\\0&0&1&0\\0&0&0&1\end{bmatrix}}$

Les constantes dans les troisièmes colonne et ligne de matrice permettent de préserver la coordonnée Z qui reste donc inchangée par une matrice 2D.

Point origine

La rotation se fait par défaut autour du point d'origine de l'élément (0,0). Pour éviter une translation, il est possible de modifier ce point en définissant la propriété transform-origin^[8].

La valeur peut être exprimée en pixels, en pourcentage de la taille de l'élément ou par un nom. Il peut y avoir 3 coordonnées pour les rotations 3D.

Exemples :

transform-origin: bottom right 60px;
transform-origin: 40% 50px;
transform-origin: center;
transform-origin: top left;

Références

[1] ttps://developer.mozilla.org/fr/docs/Web/CSS/transform

[2] ttps://developer.mozilla.org/fr/docs/Web/CSS/transform-function/translate

[3] ttps://developer.mozilla.org/fr/docs/Web/CSS/transform-function/scale

[4] ttps://developer.mozilla.org/fr/docs/Web/CSS/transform-function/scale3d

[5] ttps://developer.mozilla.org/fr/docs/Web/CSS/transform-function/skew

[6] ttps://developer.mozilla.org/fr/docs/Web/CSS/transform-function/matrix

[7] ttps://developer.mozilla.org/fr/docs/Web/CSS/transform-function/matrix3d

[8] ttps://developer.mozilla.org/fr/docs/Web/CSS/transform-origin

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]