Bonjour, 

J’ai personnellement pas connu les anciennes versions de CSS, mais CSS3 apporte à priori de réelles nouveautés en terme d’animations et de possibilités pour les développeurs et les designers. Je vais donc découvrir en même temps que toi cette nouvelle fonctionnalité, Les transformations 2D. Je n’ai jamais manipulé cette propriété, mes premiers tests sont donc ceux que tu verras dans le fichier Codepen. Il va être désormais possible de modifier la position des éléments de notre page, les déplacer, les faire tourner, les déformer, etc…

On va pouvoir torturer un peu le contenu de notre pagemais il faudra veiller à ne pas le noyer dans des animations, et que l’utilisation de notre site devienne anarchique. Exemple très concret, je n’aime pas du tout l’animation des liens de la rubrique « Articles préférés » de ma page d’accueil. Elle n’apporte rien et je la trouve assez moche. C’est une animation qui est directement ajoutée avec le plugin, je vais donc chercher un moyen de la retirer.

 J’écris cet article en suivant le cours d’Openclassrooms et en lisant le livre « CSS3 pour les web designer », de Dan Cederholm, voir dans la bibliothèque pour plus d’information…

La rotation

Il existe une nouvelle propriété CSS3 qui permet de réaliser la rotation d’un élément. C’est assez simple à faire sauf qu’on va être confronté aux mêmes problèmes de compatibilités liés aux différents navigateurs. Il va donc falloir ajouter systématiquement les préfixes qu’on commence à bien connaître.

Petit rappel de quelque chose que j’ai apprise en lisant le livre de Dan Cederholm, c’est qu’il est impératif de noter la propriété avec les préfixes et en dernier la propriété seule. Voici donc pour être plus clair ce qu’il faut faire avec la nouvelle propriété qui sert à faire les rotations:

.rotation{
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg); 
-o-transform:rotate(10deg);
-ms-transform:rotate(10deg);
transform:rotate(10deg);
}

Sur Can I Use je vois que les navigateurs sur Android (mobile) ont encore besoin du préfixe -webkit- . Dans le cours Openclassrooms, ils indiquent qu’il faut appliquer le même préfixe pour Safari mais à ce jour je vois qu’il supporte cette propriété. En revanche sur MDN (une bible à découvrir si tu ne connais pas!), les transformations 2D ne sont implémentées qu’à l’état expérimentale sur plusieurs navigateurs. Dans le doute, et avec 3 sources différentes, je mets la dose et je note la propriété pour tous les navigateurs.

Si tu me suis depuis un moment, je te laisse à disposition tous mes tests sur Codepen.

Il faut savoir, pour avoir un peu anticiper avec la lecture du livre, que TOUTES les transformations 2D se feront avec la propriété transform, seules les valeurs vont donc changer suivant les effets que tu veux intégrer dans ta page.

La rotation est indiquée en degrés (deg) mais on peut par exemple indiqué qu’on souhaite que l’élément fasse un demi tour sans spécifier le nombre de degrés avec transform: rotate(0.5turn); (oui, sans espace, je me suis fait avoir j’en avais mis un …).

Point de départ de la transformation

Avant tout déplacement, il est important de bien savoir d’où on part, pour savoir où on va. On peut donc préciser l’origine de notre déplacement, que ce soit une rotation ou une translation. Par défaut, le point d’origine sera le centre de l’élément (une photo, un bloc de texte, etc).

Il est possible de modifier le point de départ de d’une transformation à l’aide de la propriété transform-origin. Problème, tous les navigateurs ne sont pas capable de comprendre cette propriété, il faut donc encore sortir la collection complète des préfixes…

p{
	-webkit-transform-origin: 0 0;/* google safari */
	-o-transform-origin: 0 0; /*opera*/
    -ms-transform-origin: 0 0; /*internet explorer*/
    -moz-transform-origin: 0 0; /*firefox*/
    transform-origin: 0 0;
    transform: rotate(25deg);
}

Dans l’exemple si dessus, le point d’origine se trouve en haut à gauche (0,0). Pour tout autre point d’origine, il faut réfléchir en absolu par rapport à cette origine 0.

Le plus simple à mon avis est de résonner en pourcentage:

  • 50%, 50% : reviendrait à la valeur par défaut, au milieu de l’élément,
  • 0, 50%: milieu du bord gauche,
  • 100%, 50% milieu du bord droit,
  • etc.

L’origine est donc le coin haut gauche et notre repère X/Y est inversé:

  • X : axe allant de la gauche vers la droite,
  • Y : axe allant du haut de la page, vers le bas.

Tu peux aussi, si tu souhaites être très précis, utiliser la valeur calc(), pour que le navigateur calcul la position suivant l’opération mathématique que tu lui as demandée de résoudre. Je ne me suis jamais encore servi de calc(), mais je l’ai vu apparaître souvent.

Il existe pas mal de possibilités, donc pour aller un peu plus loin je te conseille de lire la documentation sur le MDN (français), et celle du W3C.

 

Le changement d’échelle

CSS3 permets de redimensionner une image assez facilement avec la propriété transform : scale();. Comme précédemment, il va falloir utiliser notre collections de préfixes pour permettre à tous les navigateurs de comprendre la propriété.

.scale{
	-webkit-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-moz-transform: scale(1.2);
	transform: scale(1.2);
	
}

Dans l’exemple de code ci dessus, on a augmenté la taille de la photo en lui appliquant un facteur de 1,2 soit 20% plus grand. En mettant un facteur d’échelle inférieur à 1, on réduit la taille de l’image.  La valeur par défaut est de 1, ton image sera donc à sa taille normale.

Veilles à toujours avoir des images de grandes résolutions pour qu’une fois agrandie elles ne pixélisent pas.

On peut aller un peut plus loin dans la mesure où il est possible de choisir sur quel axe (X ou Y) on souhaite que l’image soit agrandie, on peut aussi appliquer des facteurs d’échelle différent sur chacun de ces axes.

Cela peut être très pratique pour faire des bannières par exemple, mais attention cela peut déformer l’image si l’écart en X et Y est trop important, ou si le rapport largeur/hauteur de l’image est très différent de la photo d’origine.

Pour réaliser ces transformations d’échelles particulières voici le code qu’il faudrait saisir:

.suivant-x{   /* Remarques bien le X devant scale!! */
	-webkit-transform: scaleX(1.5);
	-o-transform: scaleX(1.5);
	-ms-transform: scaleX(1.5);
	-moz-transform: scaleX(1.5);
	transform: scaleX(1.5);
}

.suivant-Y{   /* Remarques bien le Y devant scale!! */
	-webkit-transform: scaleX(1.5);
	-o-transform: scaleX(1.5);
	-ms-transform: scaleX(1.5);
	-moz-transform: scaleX(1.5);
	transform: scaleX(1.5);
}

.x-y{ /* cas où on souhaite agir sur X et sur Y */
	-webkit-transform: scale(1.3,0.6);
	-o-transform: scale(1.3,0.6);
	-ms-transform: scale(1.3,0.6);
	-moz-transform: scale(1.3,0.6);
	transform: scale(1.3,0.6);
}

Lorsque tu souhaites agir sur l’axe X et Y, l’ordre des facteurs situés entre parenthèses est X puis Y! Attention à l’ordre!

Je trouve que cet effet d’échelle est très intéressant surtout lorsqu’on survole un bloc, pour bien le mettre en évidence. Pour cela il faut utiliser la pseudo-classe :hover. Je ne détaille pas cette pseudo-classe ici, ça viendra un peu plus tard car je m’en sers très souvent et il y a plein de choses classe à faire avec… encore un peu de patience donc… Mais pour voir comment se passe l’effet sur une image au survol, c’est par ici… j’ai pimenté un peu l’effet, jette un oeil au code pour voir l’astuce!

 

Les translations

La translation va être un déplacement  suivant un ou plusieurs axes. Rappelles toi de tes bons vieux cours de géométrie, avec les fameux axes X et Y.

Comme pour les transformations d’échelles, on va se servir d’une nouvelle propriété, on ne va pas ranger notre collections de préfixes, on va pouvoir combiner les translations suivant X et Y pour aller en diagonale, etc. Bref un nouveau terrain de jeux est ouvert! Bref, trêve d’explication, on est quand même là pour coder!

.suivant-x{
	-webkit-transform: translateX(100px);
	-o-transform: translateX(100px);
	-ms-transform: translateX(100px);
	-moz-transform: translateX(100px);
	transform: translateX(100px);
}

.suivant-y{
	-webkit-transform: translateY(5em);
	-o-transform: translateY(5em);
	-ms-transform: translateY(5em);
	-moz-transform: translateY(5em);
	transform: translateY(5em);
}

.diagonale{
	-webkit-transform: translate(100px, 50px);
	-o-transform: translate(100px, 50px);
	-ms-transform: translate(100px, 50px);
	-moz-transform: translate(100px, 50px);
	transform: translate(100px, 50px);
}

Dans les exemples de Codepen, je vais continuer à me servir de la pseudo-classe :hover pour bien mettre les translations en évidence. Tu as la possibilité d’indiquer tes translations en px ou en em.

Bon il n’y a rien de compliqué en fait à ce stade, une fois qu’on a compris le principe, ça se passe assez bien, voyons les propriétés suivantes…

La déformation

La déformation permet de transformer nos blocs, images ou texte en losange, plus ou moins allongés suivant ce que l’on souhaitera avoir. Je ne vais pas me répéter, puisque cela fonctionne exactement comme translate, donc voyons ce que ça donne sur Codepen. Seul le nom de la propriété et on va exprimer les valeurs en degré.

.deformation-x{
	-webkit-transform: skewX(30deg);
	-o-transform: skewX(30deg);
	-ms-transform: skewX(30deg);
	-moz-transform: skewX(30deg);
	transform: skewX(30deg);
}

.deformation-y{
	-webkit-transform: skewY(15deg);
	-o-transform: skewY(15deg);
	-ms-transform: skewY(15deg);
	-moz-transform: skewY(15deg);
	transform: skewY(15deg);
}

Il faut faire attention à ce que nos transformations permettent de ne pas se « détacher du pointeur de la souris. Si c’est le cas, l’image s’agite très vite ne sachant plus sur quelle position se mettre. C’est notamment le cas sur le dernier exemple de cette section dans le fichier Codepen. C’est assez désagréable. Imagines que tu aies ce phénomène sur un bouton « Validez votre achat », personne ne pourrait le faire, ce qui est très dommage!

On mélange!

Alors j’avais suivi une vidéo d’un développeur sur Youtube et une chose m’est restée: « Apprendre à coder c’est très facile.Être créatif avec du code, ça c’est compliqué! ». J’aime beaucoup cette phrase, parce que je la trouve très vraie, et surtout elle va très bien illustrer ce qui suit! Le but maintenant que l’on a découvert pleins de nouvelles propriétés, ça va être de savoir s’en servir intelligemment et de réussir à les combiner sans en mettre des tonnes!

Pour limiter les ligne de code, il est possible de regrouper toutes ces propriétés dans une seule, et c’est plutôt une bonne nouvelle, puisqu’à chaque fois il faut saisir les préfixes… Voilà donc ce qu’il est possible de faire:

.melange{
	-webkit-transform: translate(30px, 50px) rotate(30deg) scale(1.3);
	-o-transform: translate(30px, 50px) rotate(30deg) scale(1.3);
	-ms-transform: translate(30px, 50px) rotate(30deg) scale(1.3);
	-moz-transform: translate(30px, 50px) rotate(30deg) scale(1.3);
	transform: translate(30px, 50px) rotate(30deg) scale(1.3);
}

Il est donc possible d’ajouter les propriétés en les séparants simplement d’un espace.

Entre dans la matrice…

Pour finir sur ces transformations il est possible d’utiliser les matrices si on est à l’aise avec… attention aux montées de fièvre à la lecture de cette partie, cela peut réveiller de mauvais souvenir de cours de math chez certain…j’en fait parti…

Je n’ai pas fait d’études longues en math, pas de classe prépa ou d’école d’ingénieur à mon actif, juste un IUT Génie Civil, mais j’ai souvenir d’avoir vaguement entendu parler de matrice en terminale… rien qui me permette de dominer le sujet de 14 ans plus tard…

L’avantage des matrices c’est qu’elles regroupent plusieurs valeurs de la propriété  transform:

  • translate,
  • skew,
  • scale.

La composition de la matrice

Une matrice se compose sous la forme d’un tableau de chiffre. Je n’ai pas voulu perdre 2 heures à chercher un plug in pour faire des matrices, donc j’ai fait ça à l’ancienne:

les transformations 2D - les matrices

Donc là tu te dis que c’est cool, mais quel est le rapport avec les transformations?

Pour commencer, oubli tout de suite la ligne du bas, on ne s’en servira pas ici, puisqu’elle sert à faire des transformations 3D, si j’ai bien compris ce que j’ai lu.

Voici donc ce que veulent dire ces chiffres:

les transformations 2D - les matrices

  • a : agrandissement suivant X soit scaleX(),
  • b : déformation suivant Y soit skewY(),
  • c : déformation suivant X soit skewX(),
  • d : agrandissement suivant Y soit scaleY(),
  • e : déplacement suivant X soit translateX(),
  • f : déplacement suivant Y soit translateY().

Je me suis fait un pense bête sur mon bureau pour me familiariser avec la position de chaque propriété au sein de cette matrice. Cette technique n’est pas intuitive pour moi mais je la trouve très intéressante, puisqu’on a la possibilité de regrouper plusieurs propriétés en une. Cerise sur le gâteau, on n’a pas besoin d’écrire les préfixes pour chaque propriété, on aura donc à les écrire que pour la matrice!

Enfin si tu n’as besoin que d’une seule propriété, l’utilisation de la matrice peut être un peu lourde à écrire surtout lorsque comme moi, tu n’es pas habitué à les manipuler.

.matrices-1{ /* réduction suivant X et Y*/ 
	-webkit-transform: matrix(2, 0,0,0,2,0) ;
	-o-transform: matrix(2, 0,0 , 2,0,0);
	-ms-transform: matrix(2, 0,0 , 2,0,0);
	-moz-transform: matrix(2, 0,0 , 2,0,0);
	transform: matrix(2, 0,0 , 2,0,0);
}

 

Pour finir sur les transformations 2D

Je terminerais cet article en insistant sur un point que j’ai appris en lisant le livre de Dan Cederholm: il faut que les animations qu’on ajoutent servent l’expérience de l’utilisateur, que ça soit ludique à utiliser, que ça puisse être cool dans le sens surprenant sans en faire des tonnes. Il ne faut jamais que ça desserve le message à faire passer, gêner une action, ou rendre l’utilisation compliquée!

Je raccourci un peu mais il faut vraiment veiller à cela.

Je suis un peu retombé dans mes travers à faire un article long, qui a mis du temps à sortir, mais n’ayant jamais utiliser ces propriétés, je me suis laissé allé à quelques essais…

Pour ma part je vais essayer de m’habituer aux matrices pour être plus à l’aise, il y a notamment un point qui m’interpelle, je n’ai pas trouvé comment intégrer les rotations aux matrices… je vais chercher ça…

Je te dis à bientôt pour mon avant dernier article sur Bootstrap, concernant la navigation.

Guillaume

 

  • 1

    Tu trouveras ici la liste complète des livres sur lesquelles je vais appuyer ma formation. Je...