CSS :Les transformations 2D -introduction

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

Le code CSS de la page

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) ; transform-origin : center center ;} #boite8:active {transform : rotate(45deg) ; transform-origin : left top ;} #boite9:active {transform : rotate(45deg) ; transform-origin : right bottom;}

Faut-il rappeler qu'avec le CSS on peut créer des "boîtes en ligne" (display : inline-block)) c'est à dire des boîtes qui se positionnent côte à côte (et non pas les unes en dessous des autres).

il y a aussi la fonction translateY(valeur) pour un déplacement vertical vers le bas ou le haut (selon que la valeur est positive ou négative). La fonction scale(x,y) qui remplace scaleX() et scaleY().

Pour les trois 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.

Le code HTML

<p class = 'remarque'>Cliquez successivement sur chaque carré ci-dessous et observez ...</p> <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>

Dans la page suivante nous évoquerons d'autres fonctions de la propriété transform et nous verrons que l'on peut associer à cette propriété plusieurs fonctions.
Retour menu