Accueil
Mes tutoriels sur la programmation

Tutoriel CSS - sommaire


Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

Mon site est gratuit pour les visiteurs (et sans publicité) mais sachez qu'il a un coût ...
Signé : l'auteur.

CSS :Les transformations 2D avec CSS3

Première approche

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


Le code CSS & HTML correspondant

... .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 ;} ... <body> ... <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> ...

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 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.

Dans l'exemple ci-dessus je n'ai pas utilisé les commandes translateY(valeur négative) et rotate(valeur négative)
Un translateY(valeur négative) fait monter l'élément. Un rotate(-45 deg) par exemple, fait tourner l'élément vers la gauche.

Approfondissements - exemple 2

Il existe aussi les fonctions skewX() & skewY().
Par ailleurs on peut argumenter la propriété transform avec plusieurs commandes 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 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.

Origine de la transformation

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

Exemple


Cliquez successivement les deux carrés ci-dessous.

Ils se transforment en losange mais on voit bien que l'axe de rotation est à chaque fois différent.

Le code CSS et HTML correspondant

aside {width : 200px ; height : 200px ; } aside:active {transform :rotate(45deg);} ... <aside style =" background : red; "> </aside> <aside style =" background : green; transform-origin : top left; "> </aside>

Pour chacune des deux éléments ASIDE l'origine de l'éventuelle rotation (si survol) sera différente.
Pour le premier élément ASIDE transform-origin vaut "center center" (valeur par défaut).

Les transformations sont 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 un transition sur une transformation.