Aller au contenu

Cartes qui se retournent

Trois cartes de prestations qui se retournent en 3D au survol ou au focus clavier pour révéler délai, tarif et lien de devis.

  • Tailwind
  • React
  • CSS
  • WordPress
Ouvrir dans un nouvel onglet

Description

Chaque carte présente une prestation au recto puis pivote en 3D pour montrer au verso le délai, le prix de départ et un lien de devis, dès qu’elle est survolée, touchée sur mobile ou que son lien reçoit le focus clavier. Idéal pour un artisan, une agence, un traiteur ou un comparatif de formules. Les deux faces partagent la même case de grille, donc la carte prend la hauteur de son contenu, sans hauteur fixe ni script. Le recto comme le verso restent lisibles par les lecteurs d’écran. Contraste AA en clair comme en sombre. Avec prefers-reduced-motion, la carte change de face instantanément, sans rotation.

Code

Chargement du code…

Contenu de l'archive

effet-carte-retournement-html-tailwind.zip3 fichiers · 4 Ko

  • index.html7 Ko
  • README.md3 Ko
  • LICENSE.md1 Ko

Mots-clés

Mis à jour le 18 octobre 2026.

Dans le même esprit

  • Un suivi de dossier en trois étapes où un tampon « Validé » vient se poser sur chaque carte quand elle arrive à l’écran.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Un paysage de montagnes en plusieurs plans qui glissent à des vitesses différentes pendant le défilement.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Un ciel de lever du jour où des nuages dérivent lentement derrière le titre et le texte d’accroche.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Un bandeau de fête où des confettis de couleur tombent en tournoyant derrière l’annonce.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant