CSS : les transformations 2D - suite

Cliquez successivement sur chaque carte et observez ...

Le code de la page (extraits)

... <style> img {display : inline-block ; margin : 1% ; height:auto; vertical-align : top ; width :20%; } #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) ; } ... <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" /> ...

Commentaire du code

Comme dans la page précédente 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 rois.

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