Actualités WordPress, CSS & Webdesign, OceanWP & Elementor.

Il est possible de réaliser des transformations 2D avec les CSS3 !

Transformer en 2D avec css3L’arlésienne CSS/HTML5 continue de faire parler d’elle, pas une semaine ou deux sans qu’une nouvelle fonctionnalité ou technologie, syntaxe, ne soit décortiquée, proposée… tout cela c’est joli, mais pas « standard » dans la plupart des navigateurs sans passer par de longues listes d’attributs tagués (-moz-, -webkit-, etc).

Dans le mode 2D CSS3 ajoute pas mal de choses bien pratiques pour manipuler les coordonnées des éléments, une petite liste des nouveautés :

  • Translation (translate),
  • Mise à l’échelle (scale),
  • Rotation (rotate)
  • Inclinaison (skew)
  • Matrice de transformation (matrix)

Pour pouvoir appliquer des transformations, il faut définir le point d’origine (d’ancrage) de la transformation. La propriété transform-origin sert à définir ce point.

La valeur initiale de cette propriété est le centre de l’élément, ce qui équivaut à la notation : transform-origin: 50% 50%;

Il est possible de changer cette valeur en utilisant un mot-clef de position (top, right, bottom, left) suivi d’une valeur chiffrée dont l’unité peut varier (px, %, etc.) comme dans cet exemple :

div {
transform-origin: top 0 left 0;
transform: scale(1.25);
}

Il s’agit là de la syntaxe proposée par le W3C. À l’heure actuelle (2012) aucun navigateur n’implémente cette syntaxe correctement. Cependant, il suffit de supprimer les mots-clefs de position pour obtenir des résultats sur tous les navigateurs récents (toujours à condition d’utiliser les préfixes vendeurs -webkit-,-moz-,-ms-,-o- selon les versions);

Les transformations

Pour les transformations la syntaxe de base est la suivante : transform: function(value);

On peut lister plusieurs fonctions les unes après les autres comme ceci : transform : function1(value1) function2(value2) function3(value3);

Il faut juste laisser un simple espace entre chaque fonction.

Voici un style avec les attributs tagués pour les navigateurs principaux actuels :

.bloc_penche_30 {
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */

On voit que cela reste lourd à utiliser, comme tout ce qui touche actuellement les CSS3, je reste en retrait là dessus même si quelques fonctionnalités sont utilisées dans les templates WordPress modernes, j’ai un peu de mal à personnaliser les styles en dur sans parfois oublier quelque chose… que je découvre bien après sur le navigateur à l’attribut CSS orphelin.

Une combinaison de transformation sera donc écrite dans ce style :

.bloc_superbe {
transform: rotate(30deg) translate(50px,15px);
-ms-transform: rotate(30deg) translate(50px,15px); /* IE 9 */
-webkit-transform: rotate(30deg)  translate(50px,15px); /* Safari and Chrome */
-o-transform: rotate(30deg) translate(50px,15px); /* Opera */
-moz-transform: rotate(30deg) translate(50px,15px); /* Firefox */

On peut jouer avec la transformation au survol de l’élément par exemple (version standard of course) :

div { transform: translate(20px, 35px); }

div:hover { transform: translateX(-20px); }

Ici l’élément est déplacé de 20 pixels de la gauche et 35 pixels du haut (point référents) mais au survol il va revenir à son point d’origine.

Il reste à tester tout cela pour créer de nouveaux effets visuels sur les éléments HTML… réjouissant… non ?

jquery transitTransformer avec jQuery Transit

Pour palier la non standardisation actuelle on peut choisir d’utiliser une librairie jQuery qui propose pratiquement les mêmes choses (mais moins puissante quand même).

Allez voir les démonstrations en live, c’est plutôt sympathique : démo jQuery Transit

Vivement la standardisation d’HTML5/CSS3 sur tous les navigateurs, sachant qu’il faudra compter une version Explorer 9 pour s’éviter du hack ou des bricolages improbables pour singer tout cela.

Sources : Alsacréationsw3schoolsricostacruz

Cet article a 1 commentaire

  1. Ça reste délicat à mettre en œuvre car ce n’est supporté par tous les navigateurs. Mais j’ai effectué quelques tests bien sympathiques qui préfigurent d’un bon technologique avec le couple HTML5/CSS3 pour un avenir du web sans Flash.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Fermer le menu