Les transformations 2D avec CSS

On parle de transformation lorsqu'un élément se déplace ou change de taille ou se déforme (inclinaison) ou pivote (rotation).
Une transformation peut porter sur une boite, une image. Elle peut être 2D ou 3D. Dans ce chapitre ne seront abordées que les transformations 2D.

Première approche

Cliquez successivement sur chaque carré ci-dessous et observez ...

Le code CSS

	...
	.boite {display : inline-block ; margin : 1%  ; border : 1px solid black ; 
		width : 150px ; height : 150px ; border-top : 4px solid black;}
		
	#boite1{ background : lime ;  }
	#boite2{background : red ; }
	#boite3{background : yellow ; }
	#boite4{background : purple ; }
	#boite5{background : orange ; }
	#boite6{background : silver ; }
	#boite7{background : chocolate ; }
	#boite8{background : coral ; }
		
	#boite1:active{transform : translateX(-200px) ;}
	#boite2:active {transform : translateX(200px); }
	#boite3:active {transform : translateY(200px) ; }
	#boite4:active {transform : scaleY(2) ; }
	#boite5:active{transform : scaleX(2) ; }
	#boite6:active {transform : scale(2,2) ; }
	#boite7:active {transform : rotate(45deg) ; }
	#boite8:active {transform : rotate(45deg) ; transform-origin : left top ;}

Pour éviter un saut de ligne entre chaque boite DIV il suffit de leur appliquer la propriété display : inline-block.

Rappel : la pseudo classe :active signifie "sur survol".

Le code HTML

	...
	<div class ="boite" id = 'boite1'>	</div>
	<div class ="boite" id = 'boite2'>	</div>
	<div class ="boite" id = 'boite3'>	</div>
	<div class ="boite" id = 'boite4'>	</div>
	<br>
	<div  class ="boite"id = 'boite5'>	</div>
	<div  class ="boite"id = 'boite6'>	</div>
	<div class ="boite" id = 'boite7'>	</div>
	<div class ="boite" id = 'boite8'>	</div>
	...

Chaque élément DIV se voit affecter la classe "boite" est un ID différent qui détermine la couleur de fond.
J'ai utilisé la propriété CSS transform avec différentes fonctions.

sur la première boite (lime) elle se déplace vers la gauche : translateX(valeur négative)
sur la deuxième boite (red) elle se déplace vers la droite : translateX(valeur positive)
sur la troisième boite (yellow) elle descend :translateY(valeur positive)
sur la quatrième boite (purple) sa hauteur double : scaleY(valeur)
sur la cinquième boite (orange) sa largeur double : scaleX(valeur)
sur la sixième boite (silver) hauteur et largeur doublent : scale(valeur,valeur)
sur la septième boite (chocolat) elle tourne de 45 degrés à partir de son centre
sur la huitième boite elle tourne de 45 degrés à partir du coin haut gauche ... Voir plus loin : origine de la transformation

La propriété transform peut être argumentée avec les commandes rotate(deg) / scaleX(x) / scaleY(y) / scale(x,y) / translateX(x) / translateY(y) / translate(x,y).
Les arguments x et y sont des pixels ; il faut préciser l'unité. Exemples : 200px, -100px
L'argument de la fonction rotate() est un angle en degrés ; il faut préciser l'unité. Exemples : 45deg, -30deg Les valeurs peuvent être négatives.

Approfondissements - exemple 2

Il existe aussi les fonctions skewX() & skewY().
Par ailleurs on peut argumenter la propriété transform avec plusieurs fonctions chainées !

Cliquez successivement sur chaque carte et observez ...

Le code CSS & HTML correspondant

...
	#carte1:active{transform : skewX(15deg) ;}
	#carte2:active {transform : skewY(15deg); }
	#carte3:active {transform : skewX(-15deg)  ; }
	#carte4:active {transform : skewX(-15deg) skewY(-15deg) ; }
	#carte5:active {transform : rotate(90deg) translate(200px,0) ; }
	#carte6:active {transform : rotate(-90deg) translate(-200px,0) ;}
	#carte7:active {transform : translateY(400px) scale(0.5) ; }
	#carte8:active {transform : scale(0.5) translateY(400px) ; }
	...
<body>
	...
	<img src="../images/as_coeur.jpg"  id ="carte1"/>
	<img src="../images/as_carreau.jpg" id ="carte2" />
	<img src="../images/as_trefle.jpg" id ="carte3" />
	<img src="../images/as_pique.jpg" id ="carte4" />
	<img src="../images/roi_coeur.jpg"  id ="carte5"/>
	<img src="../images/roi_carreau.jpg" id ="carte6" />
	<img src="../images/roi_trefle.jpg" id ="carte7" />
	<img src="../images/roi_pique.jpg" id ="carte8" />
	...

Ici nous étudions deux nouvelles fonctions de la propriété transform : skewX & skewY.
Grâce à cette fonction vous pouvez transformer un rectangle en parallélogramme (côtés opposés restent parallèles mais les angles ne font plus 90°).
Aussi surprenant que cela paraisse skew(x,y) n'existe pas dans la nomenclature W3C même si elle acceptée sur certains navigateurs.

Comme vous pouvez le constater à la lecture du code CSS ci-dessus, vous pouvez aussi argumenter la propriété transform avec plusieurs fonctions comme c'est le cas pour les quatre dernières cartes (les rois).

la première carte se déforme de 15 dégrés vers la gauche
la deuxième carte se déforme de 15 degrés vers le bas
la troisième carte se déforme vers la droite de 15 degrés
la quatrième carte se déforme vers la droite et vers le haut car les arguments des fonctions skewX et skewY sont négatifs
la cinquième carte subit une rotation vers la droite et se déplace vers la droite car l'argument x est positif
la sixième carte subit une rotation vers la gauche et se déplace vers la gauche car l'argument x est négatif
pour les cartes 7 et 8 les commandes de la propriété transform sont identiques mais pas dans le même ordre. L'effet obtenu n'est pas le même ! La carte 8 ne se déplace que de 200px vers le bas (et non pas de 400px comme il est indiqué dans le code) car elle subit avant un changement d'échelle de 0.5 via la fonction scale().

Donc lorsque vous argumentez la propriété transform avec plusieurs fonctions, l'ordre des ces commandes est crucial.

Faire subir une rotation à une image mais aussi à la légende associée

Il est impératif de regrouper les deux éléments dans le conteneur figure et appliquer la transformation à cet élément.

Le code d'une page web

...
<style>
	figure {display : inline-block; margin : 1% ; width : 35%; border : 1px solid black ; box-shadow : 1% 1% 1% black; }
	figure figcaption {text-align : center; font-size : 1.2em;}
	figure img {width : 90%; display : block ; margin : 5px auto ; }
	figure.rotation1:hover {transform : rotate(10deg);}
	figure.rotation2:hover {transform : rotate(-10deg)}
	figure.rotation3:hover {transform : rotate(5deg); }
	figure.rotation4:hover {transform : rotate(-5deg);}
</style>
</head><body>
<section>
	<figure class ="rotation1">
		<img src ="otarie.jpg">
		<figcaption>Otarie</figcaption>
	</figure>
	<figure class ="rotation2">
		<img src ="veau_marin.jpg">
		<figcaption>Phoque - veau marin</figcaption>
	</figure>
	<figure class ="rotation3">
		<img src ="grand_dauphin.jpg">
		<figcaption>Dauphin</figcaption>
	</figure>
	<figure class ="rotation4">
		<img src ="morse.jpg">
		<figcaption>Morse</figcaption>
	</figure>
</section>
...

à chaque image est associée logiquement une légende grâce à l'emploi des éléments figure & figcaption

Aperçu dans un Iframe

La rotation (sur survol) s'applique à l'image mais aussi à sa légende !

Origine de la transformation

Par défaut l'origine d'une transformation d'un élément HTML est son centre mais elle peut être modifiée grâce à la propriété transform-origin.

Exemple

Cliquez successivement les trois carrés ci-dessous.

Ils se transforment en losange mais on voit bien que le premier carré pivote autour de son centre alors que le second pivote à partir de son coin haut gauche et le troisième à partir du coin bas droit.

Le code CSS et HTML correspondant

	.carre {width : 200px ; height : 200px ; margin : 10px;  }
	.carre:active {transform :rotate(45deg);}
...
<div class ="carre" style =" background : red; "> </div>
<div class ="carre"  
	style =" background : green; transform-origin : top left; "> </div>
<div class ="carre"  
	style =" background : yellow; transform-origin : bottom right; "> </div>

Pour le premier carré l'origine de la rotation est le centre de cet élément.
Pour le deuxième carré l'origine de la transformation est le coin supérieur gauche du carré.
Pour le troisième carré l'origine de la rotation est le coin inférieur droit de cet élément.

Remarque

Les transformations sur survol ou clic sont ici instantanées. Il serait préférable que le passage de l'état initial vers l'état final de l'élément se déroule en quelques secondes. C'est possible ! Il faut réaliser une transformation avec transition c'est à dire sur une certaine durée.
C'est l'objet du chapitre suivant.

Traduction

Tutoriel CSS - sommaire

Révisions CSS2

Nouveautés CSS3

Nouveautés CSS3 - suite

Transformations, transitions & animations

Tutoriel CSS3 - recherche

L'auteur : Patrick Darcheville