CSS :Les transformations 2D

Première approche

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

Le code CSS & HTML correspondant

... div {display : inline-block ; margin : 1% ; border : 1px solid black ; width : 30% ; height : 200px ; 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 ; } #boite9{background : cyan ; } #boite1:active{transform : rotate(45deg) ;} #boite2:active {transform : translateX(200px); } #boite3:active {transform : translate(200px,-100px) ; } #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 ;} #boite9:active {transform : rotate(45deg) ; transform-origin : right bottom;} ... <div id = 'boite1'> </div> <div id = 'boite2'> </div> <div id = 'boite3'> </div> <div id = 'boite4'> </div> <div id = 'boite5'> </div> <div id = 'boite6'> </div> <div id = 'boite7'> </div> <div id = 'boite8'> </div> <div id = 'boite9'> </div> ...

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

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 (deg, x, y) peuvent être des nombres négatifs.

Pour les deux dernières boîtes j'associe à la rotation la propriété transform-origin. Par défaut les valeurs de cette propriété sont center center (ou 50% 50%) ce qui veut dire que le point d'origine de la transformation est le centre de l'objet.
Pour la huitième boîte l'origine de la rotation est l'angle en haut à gauche et pour la dernière boîte l'origine de la rotation est l'angle en bas à droite.

Approfondissements

Il existe aussi la commande skew().
Par ailleurs on peut argumenter la propriété transform avec plusieurs commandes !

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(30deg) translate(200px,0) ; } #carte6:active {transform : rotate(-30deg) translate(-200px,0) ;} #carte7:active {transform : rotate(30deg) translateY(400px) scale(0.5) ; } #carte8:active {transform : rotate(30deg) 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" /> ...

Comme dans le premier exemple nous avons utilisé la nouvelle propriété CSS transform mais avec d'autres fonctions.
Et oui il s'agit d'une fonction très riche. Ici nous étudions deux nouvelles fonctions de cette propriété : skewX et skewY.
Grâce à cette commande vous pouvez transformer un rectangle en parallélogramme.
Aussi suprenant 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 vous pouvez aussi argumenter la propriété transform avec plusieurs commandes comme c'est le cas pour les quatre dernières cartes (les rois).

Donc lorsque vous argumentez la propriété transform avec plusieurs fonctions l'ordre des ces commandes est donc très important.
Retour menu