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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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

Avant transformation P	Après transformation P

Exemple 2[modifier | modifier le wikicode]

transform: scale(3.0, 0.5);

Avant transformation P	Après transformation P

Exemple 3[modifier | modifier le wikicode]

transform: skew(15deg, 5deg);

Avant transformation P	Après transformation P

Exemple 4[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

[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]