La propriété transform permet d'appliquer une transformation géométrique (affine) à un élément.
Nous nous limitons aux transformations 2D, les transformation 3D n'étant reconnues que par Chrome et Safari
Pour réaliser une translation de x unités horizontalement et y unités verticalement on donne la valeur translate(x,y) à la propriété transform :
( , )
On peut obtenir un résultat équivalent en jouant sur les proprétés left et right pour un élément en position relative.
Il existe deux autres variantes pour spécifier une translation :
translateX(x) ≡ translate(x, 0)
translateY(y) ≡ translate(0, y)
modele
Pour réaliser une mise à l'échelle d'un facteur x horizontalement et d'un facteur y verticalement on donne la valeur scale(x,y) à la propriété transform :
( , )
Il existe deux autres variantes pour spécifier une mise à l'échelle :
scaleX(x) ≡ scale(x, 1)
scaleY(y) ≡ scale(1, y)
Par défaut mise à l'échelle se fait à partir du centre de l'élément appelé l'origine de la transformation
Pour modifier l'origine de la transformation il sufft de renseigner la propriété transform-origin :
:
Pour réaliser une translation de x unités horizontalement et y unités verticalement on donne la valeur rotate(a) à la propriété transform :
(
Par défaut le centre de la rotation est fixé au centre de l'élément (50%, 50%).
Pour modifier le centre de la rotation il suffit d'ajuster la propriété transform-origin
Il est également possible de réaliser une rotation autour d'un axe horizontal ou d'un axe vertical en affectant la valeur rotateX(a) ou rotateY(a) à la propriété transform
(
(
Par défaut la rotation horizontale s'effectue par rapport à l'axe horizontal passant par le centre de l'élément et la rotation verticale par rapport à l'axe vertical passant par le centre de l'élément
Pour modifier la position de l'axe horizontal on modifie la composante Y de la propriété transform-origin et pour modifier la position de l'axe vertical on modifie la composante X de la propriété transform-origin
Pour incliner un élément d'un angle y horizontalement et d'un angle x verticalement on donne la valeur skew(x,y) à la propriété transform :
( , )
Il existe deux autres variantes pour spécifier l'inclinaison :
skewX(x) ≡ skew(x, 0)
skewY(y) ≡ skew(0, y)
Par défaut mise le point fixe de la transformation est situé au centre de l'élément
Pour modifier le point fixe de la transformation il sufft de renseigner la propriété transform-origin :
La valeur matrix(a, b, c, d, e, f) de la propriété transform permet de personnaliser la transformation à appliquer.
Les quatre premières valeurs constituent les coefficient de l'application lineaire à appliquer.
Les deux dernières valeurs spécifient la translation à opérer.
matrix(a, b, c, d, e, f) ≡(
a c e
b d f
)( , , , , , )
modele
Par defaut le point fixe de l'application lineaire est le centre de l'él&eaute;ment. Il peut être redéfini en modifiant la valeur de la propriété transform-origin.
:En affectant la valeur none à la propriété transform, aucune transformation n'est appliquée.
Copyright Gabriel Braun 2007