Transformation de l'origine

A partir de la version 3 de CSS il est devenu possible de transformer les objets intégrés en 2D (et même en 3D) sans vraiment modifier leurs propriétés (largeur, hauteur...). Cette technique a permis aux designers de réussir des effets époustouflants avec un minimum de code.

Les transformations d'objets sont appliquées par rapport à son point d'origine. Ce point est par défaut situé au centre l'objet.

Si on souhaite modifier le point d'origine on fait appel à la propriété transform-origin.

Propriété transform-origin

La propriété transform-origin permet de modifier le point d'origine d'un objet HTML. Il accepte comme valeur le X et le Y de l'origine souhaité séparés par un espace. Ces deux informations peuvent être spécifiées en pourcentage, en pixel, ou par les mots clé left, right, top, bottom et center.

Si par exemple nous déclarons le style suivant:
L'origine de l'objet sera placé ainsi:

Et si la déclaration correspond à ceci:
L'origine de l'objet sera placé ainsi:

Fonctions de transformation qui s'appliquent à la propriété transform

Pour appliquer une transformation en CSS on utilise la syntaxe suivante:

transform: fonction1() fonction2() fonction3()...

Les fonctions sont séparées par un espace. Cependant on peut toujours utiliser une seule fonction si on veut.

Les fonctions contiennent des paramètres qui permettent de personnaliser la transformation souhaitée. Ces paramètres sont renseignés entre les parenthèses de la fonction.

Fonction translate()

La fonction translate() permet la translation de l'objet HTML d'un emplacement initial (où il est normalement défini) à un autre emplacement. Les coordonnées du nouvel emplacement sont renseignées entre les parenthèses de translate() et ils sont exprimés en pixel. L'origine des coordonnées, comme on l'a vu précédemment, est le point haut à gauche.
Exemple:
Si on exécute le code on aura:





Le premier paramètre de la fonction translate() représente la translation horizontale, et le deuxième la translation verticale. Notez que les sens positifs sont vers la gauche et vers le bas. Si vous renseignez des valeurs négatives à la fonctions alors la translation sera appliquée dans le sens opposé.

Il existe aussi les fonctions translateX() qui réalise une translation horizontale et translateY() qui réalise une translation verticale. Dans ce cas, nous spécifions une seule valeur dans les parenthèses.

Important:
Pour les navigateurs anciens il faut renseigner le préfixe vendeur avant la propriété transform. Pour que le dernier code soit conforme avec tous les navigateurs connus, il doit ressembler à cela:

Fonction scale()

La fonction scale() permet de redimensionner l'objet HTML (avec son contenu). Les parenthèses de la fonction peuvent accueillir une seule valeur ou deux valeurs séparées par une virgule. Ces valeurs désignent le facteur d'agrandissement. Ils n'ont pas d'unité et peuvent contenir de virgule. S'ils sont supérieur à 1 alors l'objet est agrandit, sinon alors il est rétréci.

Si une seule valeur est renseignée dans les parenthèses, alors le même facteur d'agrandissement agit sur la largeur et la hauteur de l'objet.

Exemple:
On obtiendra donc:






Essayons maintenant le code suivant:
On aura donc:



Il existe également les fonctions scaleX() et scaleY() qui appliquent respectivement un facteur d'agrandissement uniquement sur la largeur ou la hauteur.

Fonctions skewX() et skewY()

Les fonctions skewX() et skewY() permettent d'incliner un objet respectivement horizontalement et verticalement par rapport à son origine. La valeur renseignée dans les parenthèses désigne l'angle d'inclinaison et elle est exprimée en degré (deg).

Exemple d'inclinaison horizontale:
Cela donne:


Exemple d'inclinaison verticale:
Ce qui donne:





Et maintenant un exemple d'inclinaison horizontale et verticale:
Ce qui donne:

Fonction rotate()

Comme son nom l'indique, la fonction rotate() applique une rotation à l'objet autour de l'axe traversant son origine. Les parenthèses contiennent l'angle de la rotation exprimée en degré.

Selon l'axe de rotation on distingue trois variantes de la fonction rotate():

• rotate() ou rotateZ(): la rotation est appliquée par rapport à l'axe virtuel perpendiculaire à l'écran (le fameux axe des Z de z-index) qui traverse le point d'origine de l'objet. La rotation s'applique donc sur le même plan que l'écran.
• rotateX(): la rotation est appliquée par rapport à l'axe horizontale traversant l'origine de l'objet (l'axe des X). La rotation aura donc un effet 3D
• rotateY(): la rotation est appliquée par rapport à l'axe vertical traversant l'origine de l'objet (l'axe des Y). La rotation aura aussi un effet 3D

Exemple d'une rotation sur l'axe des Z:
Ce qui donne:




Exemple d'une rotation sur l'axe des X:
Ce qui donne:



Mais, il est où l'effet 3D? En fait, pour avoir cet effet de profondeur il faut faire appel à une autre fonction qui agit sur les perspectives.

Fonction perspective()

La fonction perspective() permet de prendre en compte les changements des dimensions en fonction de la profondeur (ou perspectives). Par exemple, si la rotation est appliquée par rapport à l'axe des X, le côté le plus loin (celui qui, soi-disant, entre dans l'écran) sera plus petit que celui qui en sort.

La fonction perspective() reçoit une valeur exprimée en pixel qui désigne la distance (virtuelle) qui sépare l'observateur de l'axe de rotation (qui traverse l'origine de l'objet). Plus cette distance est petite, plus l'effet de perspective est accentuée et inversement.

Reprenons l'exemple dernier, celui de la rotation par rapport à l'axe des X et appliquons lui les perspectives:
Ce qui donne:



C'est mieux non?

Voyons maintenant ce qui se passe par rapport à l'axe des Y:
Ce qui donne:

Les transformations en vidéo