CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML5 et CSS3 / Part 4 - Aller plus loin avec JavaScript et jQuery

Créer une Carte Tournante avec CSS 3D et jQuery

Retour à la formation
Chapitre 6 Leçon 4
Précédent
Suivant

Découvrez comment réaliser une carte tournante ou flipkart en utilisant des CSS 3D avancées et des transformations.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons explorer la création d'une carte tournante en utilisant les technologies CSS 3D et jQuery. Nous commencerons par la structure du code HTML, comprenant un bloc carte avec deux faces: le recto et le verso. Ensuite, nous passerons aux styles CSS, où nous introduirons de nouvelles propriétés de transformation et de perspective comme Moz Perspective et WebKit transform. Nous allons également configurer les éléments front et back pour gérer la visibilité des faces arrière. Enfin, nous ajouterons une classe jQuery qui permettra de faire tourner la carte lorsque l'utilisateur clique dessus. Nous testerons différentes valeurs de perspective pour observer comment elles affectent la rotation de la carte.

Objectifs de cette leçon

Les objectifs de cette vidéo sont les suivants :

  • Comprendre la structure HTML nécessaire pour créer une carte tournante.
  • Apprendre à utiliser les propriétés de transformation et de perspective CSS 3D.
  • Configurer et appliquer des transitions en jQuery pour animer la carte.

Prérequis pour cette leçon

Avant de suivre cette vidéo, il est recommandé d’avoir :

  • Une connaissance de base en HTML et CSS.
  • Des notions élémentaires en jQuery.

Métiers concernés

Les techniques abordées dans cette vidéo sont utiles pour les métiers suivants :

  • Développeur Front-End
  • Intégrateur Web

Alternatives et ressources

Pour réaliser des animations similaires, vous pouvez également explorer des frameworks JavaScript comme React avec des bibliothèques telles que React Spring ou GSAP.

Questions & Réponses

La propriété 'WebKit transform' permet d'appliquer des transformations 2D ou 3D à un élément web. Elle est notamment utilisée pour la rotation, l'échelle ou la translation des éléments.
La propriété 'preserve 3D' est utilisée pour maintenir l'effet 3D lors de transformations sur les éléments enfants, permettant ainsi de préserver la profondeur et l'alignement 3D.
jQuery est utilisé pour gérer les clics utilisateurs sur la carte et déclencher les transformations CSS qui feront tourner la carte en 3D.