Blog ENI : Toute la veille numérique !
Dernière chance (fin le 29/02) : -25€ dès 75€ sur les livres en ligne, vidéos... code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. HTML5 et CSS3
  3. Les transformations CSS3
Extrait - HTML5 et CSS3 Faites évoluer le design de vos sites web (4e édition)
Extraits du livre
HTML5 et CSS3 Faites évoluer le design de vos sites web (4e édition) Revenir à la page d'achat du livre

Les transformations CSS3

L’état des lieux et l’objectif

En 2019, au moment de l’écriture de ce livre, le module CSS Transforms Module Level 1 est toujours en Working Draft et est daté du 30 novembre 2018. Malgré son statut de brouillon, ce module est très bien reconnu par les navigateurs modernes.

images/new-042.png

Les transformations permettent de modifier avec des propriétés CSS l’affichage d’éléments HTML d’une page.

Une fois affiché de manière « classique », un élément HTML pourra « subir » des transformations de rotation, de déplacement, de déformation, de mise à l’échelle et de perspective.

La transformation

1. La propriété

Pour effectuer une transformation, vous devrez utiliser la propriété transform. Cette propriété utilise ensuite des fonctions pour appliquer telle ou telle transformation.

2. Le point de référence

Par défaut, toutes les transformations ont comme point de référence le centre de l’élément. Ce point de référence sert de départ pour les calculs des transformations.

Nous pouvons changer ce point de référence avec la propriété transform-origin. La valeur spécifiée indique alors le point de référence.

Les valeurs acceptées sont :

  • Des pourcentages. Par défaut la valeur est de 50% 50%, soit au milieu de l’élément.

  • Des mots-clés : left, center, right, top, center, bottom.

  • Des valeurs exprimées en pixels.

Voilà ce que donnerait une rotation avec le point de référence par défaut, au centre de l’élément :

images/chap11-016.png

Voilà un exemple de la modification du point d’origine au coin haut gauche de l’élément, suivie d’une rotation :

.rotation { 
    transform-origin: left top; 
    transform: rotate(32deg); 
} 

Voilà la modification apportée par la modification du point de référence :

images/chap11-017.png

Le déplacement

1. Sur les deux axes

La fonction translate permet d’effectuer un déplacement, une translation, sur une distance spécifiée, par rapport à sa position d’origine et selon le point de référence.

Cet exemple déplace l’image de 250 pixels horizontalement et 50 pixels verticalement :

.deplacement { 
    transform: translate(250px,50px); 
} 

Cette classe s’applique sur une image :

<p><img src="lion.jpg" alt="Lion" class="deplacement" /></p> 

Voilà la transformation effectuée :

images/chap11-001.png

2. Sur un seul axe

Vous pouvez aussi utiliser les deux fonctions de déplacement sur un seul axe :

  • translateX : pour un déplacement sur l’axe horizontal,

  • translateY : pour un déplacement sur l’axe vertical.

Exemple d’un déplacement horizontal de 20 pixels :

.deplacement { 
    transform: translateX(20px); 
} 

La mise à l’échelle

1. La mise à l’échelle proportionnelle

La fonction scale permet une mise à l’échelle d’un élément sur une échelle de 0 à 1, 1 étant la taille initiale.

Voilà un exemple d’une classe qui effectue une mise à l’échelle proportionnelle à 50 % de la taille originale.

.echelle { 
    transform: scale(.5); 
} 

2. La mise à l’échelle non proportionnelle

Si vous spécifiez deux valeurs, la première est la mise à l’échelle horizontale, la deuxième, la mise à l’échelle verticale.

Dans cet exemple, la mise à l’échelle horizontale est de 50 %, la mise à l’échelle verticale est de 20 %.

.echelle { 
    transform: scale(.5,.2); 
} 

3. La mise à l’échelle dans une seule direction

Vous pouvez utiliser les fonctions :

  • scaleX : pour la mise à l’échelle horizontale,

  • scaleY : pour la mise à l’échelle verticale.

Dans cet exemple, la mise à l’échelle est uniquement horizontale :

.echelle { 
    transform: scaleX(.5); 
} 

La rotation

La fonction rotate permet d’effectuer une rotation de l’élément. L’unité peut s’exprimer en degrés : deg ou en radians : rad.

Voilà un exemple d’une rotation de 23 degrés :

.rotation { 
    transform: rotate(23deg); 
} 

Voilà la transformation effectuée :

images/chap11-002.png

La déformation

1. La déformation sur les deux axes

La fonction skew permet d’effectuer une déformation de l’élément sur les deux axes. L’unité peut s’exprimer en degrés : deg ou en radians : rad.

Voilà un exemple avec une déformation horizontale de 20 degrés et une déformation verticale de 5 degrés :

.deformation { 
    transform: skew(20deg,-5deg); 
} 

Voilà la transformation effectuée :

images/chap11-003.png

2. La déformation sur un seul axe

Vous pouvez utiliser les fonctions :

  • skewX : pour la déformation horizontale,

  • skewY : pour la déformation verticale.

Dans cet exemple, la déformation est uniquement horizontale :

.deformation { 
transform: skewX(-20deg); 
} 

Voilà l’affichage :

images/chap11-004.png

Appliquer toutes les transformations

Vous pouvez cumuler toutes les transformations que vous voulez, il suffit d’indiquer les fonctions que vous souhaitez utiliser.

Voici un exemple avec toutes les transformations :

.tranformation { 
    transform: scale(.7) rotate(3deg) translateX(5px) skewX(-5deg); 
} 

Voilà le rendu à l’écran :

images/chap11-005.png

Les générateurs en ligne

De nombreux générateurs en ligne sont là pour vous aider dans la rédaction de vos codes CSS3 valides pour les navigateurs courants.

1. CSS 3.0 Maker

CSS 3.0 Maker (https://www.css3maker.com/css3-transform.html) vous permet d’utiliser les quatre transformations vues :

images/chap11-008.png

2. CSS3 Generator

CSS3 Generator (http://css3generator.com/), avec l’option Transform, vous donne accès aux transformations.

images/C10-002N.png

3. WestCIV

WestCIV (http://www.westciv.com/tools/transforms/index.html) vous propose l’accès à toutes les transformations que nous avons vues.

images/chap11-010.png

Exemple d’un menu

1. L’objectif

Nous allons créer un menu simple constitué d’icônes. Au survol de ces liens, les images sont légèrement agrandies, effectuent une petite rotation et ont une légère déformation horizontale.

2. La structure du menu

Le menu est une très classique liste ul :

<ul id="navigation"> 
    <li><a href="#"><img src="twitter.png" alt="twitter" />
</a></li> 
    <li><a href="#"><img src="facebook.jpg" alt="facebook" />
</a></li> 
    <li><a href="#"><img src="flickr.png" alt="flickr" />
</a></li> 
</ul> 

3. La mise en forme

Les items li sont mis en forme tout aussi « classiquement » :

#navigation li { 
    list-style: none; 
    display: inline-block; 
    margin-right: 20px; 
} 

Chaque image (img) est transformée au survol du lien (a:hover). Nous appliquons une mise à l’échelle (scale), une rotation (rotation) et un déplacement (translate).

#navigation li a:hover img { 
    transform: scale(1.1) rotate(3deg) translateX(2px); 
} 

4. L’affichage

Voilà l’affichage...

Exemple d’une galerie de Polaroid

1. L’objectif

Nous allons réaliser une galerie photo « vintage », façon Polaroid, avec des clichés déposés sur « une table ». Au survol de la souris, le cliché passe au-dessus des autres, son fond est plus blanc et l’ombre est plus marquée.

Cet exemple est très largement inspiré de celui de ce site : http://line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery

2. La structure de la galerie

Nous allons créer une structure en HTML5, avec les éléments section, figure et figcaption. L’élément section a un identifiant et chaque élément figure possède une classe.

<section id="galerie"> 
    <figure class="pic-1"> 
        <img src="photo1.jpg" alt="hippopotame" /> 
        <figcaption>Hippopotame</figcaption> 
    </figure> 
    <figure class="pic-2"> 
        <img src="photo2.jpg" alt="hippopotame" /> 
        <figcaption>Tigre</figcaption> 
    </figure> 
    <figure class="pic-3"> 
        <img src="photo3.jpg"...

Exemple de relief sur une image

1. L’objectif

L’objectif est de simuler une ombre sous une photo aux coins légèrement courbés. La technique est « toute simple » (faut-il encore y penser !). Nous allons utiliser une ombre et appliquer une rotation à cette ombre.

Cette technique était inspirée d’un exemple proposé sur un site qui n’est plus accessible actuellement.

2. La photo

L’image de la photo est insérée dans une boîte <div> identifiée :

<div id="photo"> 
    <img src="pano-ballade.jpg" alt="Panorama" /> 
</div> 

Une petite mise en forme toute simple pour la forme... Mais surtout, il faut que la boîte <div> soit positionnée.

#photo { 
    position: relative; 
    margin: 20px auto; 
    width: 500px; 
    height: 140px; 
    padding: 10px; 
    border: 1px solid #ccc; 
    background-color: #eee; 
} 

Voilà l’affichage initial :

images/chap11-013.png

3. Les ombres sous la photo

Pour « ajouter » une ombre sous la photo, nous allons utiliser les deux pseudo-classes :before et :after. Elles permettent d’ajouter du contenu avant et après l’élément auquel elles sont associées. Sauf...