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.
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
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 ( joint )
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.
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”.
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.
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.
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).
Dans la class “element-rotate”, ajoutez la propriété CSS3 “transform-style” avec pour attribut “preserve-3d”.
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”.
Positionnez à 180° la face arrière de manière à cacher la face avant.
Positionnez à -180° la div parent de la face arrière afin d’effectuer la rotation de l’élément principal.
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
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 ( joint )
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.
.
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
.
.
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”.
.
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
.
.
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.
.
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
.
.
. 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).
.
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
.
.
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.
.
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
.
