Introduction

Dans cet article, nous allons plonger dans les profondeurs de Webflow pour découvrir comment donner vie à vos designs avec un effet 3D captivant. Si vous avez déjà rêvé d'intégrer des éléments dynamiques à votre site Web qui réagissent au mouvement de la souris, vous êtes au bon endroit.

Structurer Votre Projet Webflow

Pour commencer, ouvrons Webflow et sélectionnons un projet vierge. La structure de votre projet est la fondation sur laquelle repose l'ensemble de l'effet 3D. Utilisez une approche "Client First" pour créer une base solide pour votre page, avec des éléments tels que <main>, <section>, et ainsi de suite.

Créez une div que vous nommerez "3D Card Component". Donnez-lui une hauteur minimale de 70vh (Viewport Height) pour assurer suffisamment d'espace pour notre élément. Centrez ensuite une image dans cette div en appliquant un display: flex avec align-items: center et justify-content: center pour être sûr que votre image soit parfaitement centrée.

Créer et Nommer l'Image de la Carte 3D

Après avoir placé votre image au centre de la div, nommez-la "3D Card Image". Importez l'image de votre choix, que ce soit une carte que vous avez déjà ou une que vous avez créée spécifiquement pour cela. Attribuez-lui une taille de 20rem, ajustable selon vos besoins.

Animations et Interactions 3D

Le moment est venu de donner vie à votre carte en ajoutant des interactions dynamiques. Dans Webflow, utilisez la fonction 'mouse move over element' pour créer une nouvelle animation. Nommez-la "3D Card [over element]" pour vous souvenir du type d'interaction que vous mettez en place.

Configurez les axes X et Y pour appliquer une rotation. Sur l'axe des X, vous ajusterez la rotation sur l'axe des Y et inversement, ce qui peut sembler contre-intuitif au premier abord, mais qui créera l'effet désiré de basculement de la carte.

Peaufiner l'Effet 3D

Si l'effet ne semble pas assez prononcé, n'hésitez pas à augmenter les degrés de rotation. Pour un effet plus réaliste, diminuez simplement ces valeurs.

Cependant, si l'effet 3D ne s'affiche pas correctement, il se peut que vous deviez ajuster la propriété 'perspective' du parent de l'élément. Un réglage autour de 600 pixels devrait être suffisant, mais vous pouvez jouer avec cette valeur pour obtenir l'effet désiré.

Astuces Finales et Ressources Complémentaires

Vous voilà avec une carte qui réagit avec un effet 3D au mouvement de la souris. Si vous cherchez à pousser l'expérience encore plus loin, chez CORIACE 💪, nous avons créé un cours qui enseigne comment réaliser une boutique complète avec des cartes 3D interactives, incluant des effets au clic pour révéler différentes faces de la carte.

Conclusion

Je suis ravi de partager ces astuces avec vous et j'espère que vous êtes maintenant armé pour ajouter une dimension supplémentaire à vos projets Webflow. N'hésitez pas à vous inscrire gratuitement à CORIACE 💪 pour des tutoriels plus approfondis.

À bientôt pour de nouvelles aventures dans le design web sur Webflow ! Ciao !

‍