Créez un effet de rotation 3D en CSS3

Dans ce tutoriel, nous allons voir comment mettre en place un effet de rotation en 3D sur un élément au survol de la souris. Une fois qu’il sera réalisé, vous serez vraiment étonné par le résultat de votre travail.

Vous vous êtes peut-être déjà posé la question : comment mettre en place un effet de rotation en 3D sur un élément au survol de la souris ? Pour y parvenir, nous utiliserons des transitions en CSS3 et des rotations 3D. Nous ajouterons à cela une description qui apparaîtra lors du survol. Vous pourrez réutiliser cet effet sur votre portfolio par exemple, afin de rendre plus attractive la présentation de vos réalisations. Dans ce tutoriel, aucun code JavaScript ne sera utilisé. Par Maissoum Aboudrare

Téléchargez le code.

01 La structure HTML de base
Commencez par mettre en place une liste à puces simple. Placez une div avec deux classes (une pour l’élément principal, l’autre pour l’image de fond). Vous placerez plus tard les images en arrière-plan dans le CSS. Ajoutez à l’intérieur une div qui contiendra la description.

02 La structure de base du CSS
Centrez les éléments de la liste avec les propriétés CSS “display” et “text-align”. Stylisez les éléments typographiques dans la description qui apparaîtront au survol et ajoutez le lien vers les images dans la propriété “background”.

03 Préparer la perspective
Ajoutez un conteneur supplémentaire “element-rotate” dans la partie HTML. Dans ce conteneur, ajoutez une nouvelle div pour la face arrière de l’élément à retourner. Vous remarquez dans le code ci-dessous que la classe “image01” apparaît une seconde fois. Cela permettra de garder une partie de l’image fixe autour de l’élément en rotation.

04 Paramétrer la perspective
Utilisez la propriété “perspective” sur la classe “rotate-wrap”. Mettez l’axe de profondeur z à 800 pixels. De cette manière, vous modifiez la position centrée par défaut du point de vue sur l’élément sur lequel la perspective est définie.

05 Créer l’illusion du vide
Pour créer l’illusion d’un espace vide dans l’élément qui se retourne, renseignez sur la classe “element-rotate” une couleur de fond différente de celle du fond général (blanc).

06 Créer l’effet 3D
Dans la class “element-rotate”, ajoutez la propriété CSS3 “transform-style” avec pour attribut “preserve-3d”.

07 Les faces
Attribuez les mêmes styles CSS aux faces arrière et avant. Cachez l’arrière-plan de ces faces avec la propriété “backface-visibility”.

08 Ajuster la face arrière
Positionnez à 180° la face arrière de manière à cacher la face avant.

09 Finaliser l’effet
Positionnez à -180° la div parent de la face arrière afin d’effectuer la rotation de l’élément principal.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *