Présentation des transformations en CSS3

transformation CSS

Introduites dans le cadre du CSS 3, les transformations CSS permettent de modifier l’apparence d’un élément. Les transformations CSS 2D modifient l’élément selon un axe horizontal X et un axe vertical Y, ce qui permet par exemple de le déformer ou encore de le retourner. Les transformations CSS 3D ajoutent un troisième axe, l’axe Z, qui définit la profondeur de l’élément. Ceci permet par exemple de retranscrire un effet de perspective et de déplacer les éléments dans un environnement en trois dimensions.

Les transformations CSS permettent d’obtenir des effets graphiques jusqu’à présent impossibles à réaliser sans la technologie Flash. Voyons ci-dessous quelques exemples. A noter que certains résultats de scripts seront affichés sous forme d’images afin que les internautes ayant d’anciens navigateurs puissent les voir.

Exemple de transformation CSS 2D

Premier exemple de transformation CSS : la rotation

Voici le code HTML initial :

<div id="monCarre">Le carré de Strategie Web</div>

Et le CSS associé :

#monCarre {
border: 3px solid black;
height: 100px;
width: 100px;
padding: 10px;
line-height: 20px;
text-align: center;
background-color: #F4F4F4;
-moz-transform: rotate(40deg); /* pour effectuer une rotation de 40° sous Mozilla */
-o-transform: rotate(40deg); /* pour effectuer une rotation de 40° sous Opera */
-webkit-transform: rotate(40deg); /* pour effectuer une rotation de 40° sur les navigateurs utilisant
Webkit (Chrome, Safari, ...) */
-ms-transform: rotate(40deg); /* pour effectuer une rotation de 40° sous Internet Explorer */
}

Dans cet exemple, la transformation CSS rotate(40deg) permet à l’élément d’effectuer une rotation de 40 degrés. A noter qu’il est possible d’écrire rotateX(40deg) ou rotateY(40deg) pour effectuer la rotation autour de l’axe X ou Y. Voici ci-dessous le résultat de notre exemple :

résultat transformation css 2d rotation

Deuxième exemple de transformation CSS : l'inclinaison

Nous reprenons le même code HTML que dans le premier exemple, mais associons cette fois le code CSS suivant :

#monCarre {
border: 3px solid black;
height: 100px;
width: 100px;
padding: 10px;
line-height: 20px;
text-align: center;
background-color: #F4F4F4;
-moz-transform: skew(20deg,40deg) translate(80px,20px);
-o-transform: skew(20deg,40deg) translate(80px,20px);
-webkit-transform: skew(20deg,40deg) translate(80px,20px);
-ms-transform: skew(20deg,40deg) translate(80px,20px);
}

Dans cet exemple, la transformation CSS skew(20deg, 40deg) permet d’incliner l’élément de 20 degrés sur l’axe X et de 40 degrés sur l’axe Y. A noter que cette transformation aurait pu s’écrire : skewX(20deg) ; skewY(40deg) ; . Notre carré étant par défaut près du bord haut-droit de l'écran, son inclinaison peut rendre une partie du carré invisible. Nous utilisons donc la transformation CSS translate(80px,20px) pour déplacer l’élément de 80px sur l’axe X (vers la droite) et de 20px sur l’axe Y (vers le bas). De la même manière, nous pouvons écrire translateX(80px) et/ou translateY(20px). Voici ci-dessous le résultat de notre exemple :

résultat transformation css 2d rotation

Troisième exemple de transformation CSS : l'animation

Cette fois, nous allons faire bouger progressivement notre carré lorsque l'utilisateur passe la souris dessus. L'objectif est de réaliser une petite animation où le carré effectue une rotation et un agrandissement. Nous reprenons le même code HTML que dans le premier et second exemple, mais associons cette fois le code CSS suivant :

#monCarre {
border: 3px solid black;
height: 100px;
width: 100px;
padding: 10px;
line-height: 20px;
text-align: center;
background-color: #F4F4F4;
-moz-transition: all 3s ease-in 0s;
-o-transition: all 3s ease-in 0s;
-ms-transition: all 3s ease-in 0s;
-webkit-transition: all 3s ease-in 0s;
}
#monCarre:hover {
-moz-transition: all 3s ease-in 0s;
-moz-transform: scale(1.3) rotate(90deg);
-o-transition: all 3s ease-in 0s;
-o-transform: scale(1.3) rotate(90deg);
-webkit-transition: all 3s ease-in 0s;
-webkit-transform: scale(1.3) rotate(90deg);
-ms-transition: all 3s ease-in 0s;
-ms-transform: scale(1.3) rotate(90deg);
}

Cet exemple reprend la transformation CSS rotate, mais ne l’applique qu’au survol de l’élément, grâce à la propriété hover. Nous ajoutons la transformation CSS scale afin d'agrandir le carré. En choisissant la valeur 1.3, nous agrandissons la taille du carré de 30%. Pour que la rotation et l'agrandissement s’effectuent progressivement et donc pour créer une animation, nous utilisons l’attribut transition. Cet attribut est une notation simplifiée des attributs transition-property (qui désigne quelles propriétés CSS seront affectées par la transition), transition transition-duration (qui désigne la durée de la transition), transition-timing-function (qui permet d’effectuer des accélérations et des décélérations dans la transition) et transition-delay (qui permet de faire démarrer la transition en retard ou en avance). Si votre navigateur est à jour, la démo ci-dessous devrait fonctionner.

Touchez le carré :-)

Exemple de transformation CSS 3D

Nous allons dans cet exemple réaliser un cube en trois dimensions. Commençons par observer le code HTML :

<div id="cube">
<div id="faces">
<div id="devant"><span>StratégieWeb.fr</span></div>
<div id="derriere"></div>
<div id="droite"></div>
<div id="gauche"></div>
<div id="dessus"></div>
<div id="dessous"></div>
</div>
</div>

Ajoutons le code CSS suivant :

#cube {
width: 200px;
height: 200px;
-webkit-perspective: 300;
-o-perspective: 300;
-ms-perspective: 300;
-moz-perspective: 300;
}
#faces {
width: 200px;
height: 200px;
position: absolute;
-webkit-transform: translateZ(-100px);
-webkit-transform-style: preserve-3d;
-moz-transform: translateZ(-100px);
-moz-transform-style: preserve-3d;
-o-transform: translateZ(-100px);
-o-transform-style: preserve-3d;
-ms-transform: translateZ(-100px);
-ms-transform-style: preserve-3d;
}
#devant, #derriere, #droite, #gauche, #dessus, #dessous {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid black;
text-align: center;
}
#devant {
-webkit-transform: translateZ(100px);
-o-transform: translateZ(100px);
-ms-transform: translateZ(100px);
-moz-transform: translateZ(100px);
background-color: #C8D2DE;
opacity: 0.4;
}
#devant span {
font-size: 25px;
font-weight: bold;
color: white;
line-height: 200px;
}
#derriere {
-webkit-transform: rotateX(-180deg) translateZ(100px);
-o-transform: rotateX(-180deg) translateZ(100px);
-ms-transform: rotateX(-180deg) translateZ(100px);
-moz-transform: rotateX(-180deg) translateZ(100px);
background-color: #889FB4;
opacity: 0.6;
}
#droite {
-webkit-transform: rotateY(90deg) translateZ(100px);
-o-transform: rotateY(90deg) translateZ(100px);
-ms-transform: rotateY(90deg) translateZ(100px);
-moz-transform: rotateY(90deg) translateZ(100px);
background-color: #2D7F91;
opacity: 0.7;
}
#gauche {
-webkit-transform: rotateY(-90deg) translateZ(100px);
-o-transform: rotateY(-90deg) translateZ(100px);
-ms-transform: rotateY(-90deg) translateZ(100px);
-moz-transform: rotateY(-90deg) translateZ(100px);
background-color: #2D7F91;
opacity: 0.7;
}
#dessus {
-webkit-transform: rotateX(90deg) translateZ(100px);
background-color: blue;
opacity: 0.6;
}
#dessous {
-webkit-transform: rotateX(-90deg) translateZ(100px);
background-color: blue;
opacity: 0.6;
}

Dans cet exemple, la propriété perspective définit la profondeur de la perspective de notre cube. Nous plaçons ensuite les 6 faces du cube dans un environnement 3d grâce à « transform-style: preserve-3d; ». Avec l’attribut translate-z, nous éloignons au niveau de la profondeur les faces formant notre cube. Il ne nous reste plus qu’à orienter correctement les faces du cube grâce à l’attribut rotateX et rotateY. Admirez le résultat !

résultat transformation css 2d rotation