Flip Characters
Chaque caractère se retourne sur son axe horizontal au survol — l'effet cascade de lettre en lettre grâce à un délai CSS échelonné, calculé par le JS à l'initialisation.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Texte comprend 56 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Au chargement, le script cible l'élément portant id="flipText", lit son contenu texte et réinjecte chaque caractère dans un <span> individuel via innerHTML. Chaque span reçoit un style="animation-delay: Ns" calculé à 0,05 s × index — c'est la seule responsabilité du JS ; le reste est purement CSS.
L'animation flipChar tourne le span autour de l'axe X (rotateX) : 0° → 90° → 0°. À 90°, le caractère est vu de tranche et disparaît visuellement, puis revient à plat — l'œil perçoit un « retournement ». La propriété display: inline-block sur chaque span est indispensable : sans elle, transform n'a aucun effet sur les éléments inline.
Le déclencheur est .text-flip:hover span : au survol du conteneur parent, tous les spans reçoivent l'animation en même temps, mais les délais échelonnés créent la cascade visuelle lettre par lettre. La durée totale de la cascade est approximativement (n − 1) × 0,05 s + 0,6 s, où n est le nombre de caractères.
La propriété transition: transform 0,3 s sur chaque span gère le retour à l'état repos quand la souris quitte le conteneur — les lettres reviennent en douceur sans l'animation complète.
Accessibilité
- prefers-reduced-motion absent : le code ne contient aucune media query
prefers-reduced-motion. L'animationflipCharse déclenche même si l'utilisateur a activé la réduction de mouvement dans son OS — à ajouter manuellement si nécessaire :@media (prefers-reduced-motion: reduce) { .text-flip:hover span { animation: none; } }. - Le texte reste du texte DOM natif enveloppé dans des spans — les lecteurs d'écran lisent le contenu original sans perturbation, contrairement à un canvas ou une image.
- Clavier uniquement : l'effet est déclenché par
:hover, pas:focus-within. Les utilisateurs naviguant au clavier (Tab) ne voient pas l'animation. Ajouter.text-flip:focus-within spandans la règle d'animation pour corriger. - Contraste : l'effet ne définit aucune couleur — le ratio de contraste dépend entièrement de l'implémentation. Vérifier WCAG AA (≥ 4,5:1) selon le fond choisi.
- L'animation dure 0,6 s et ne boucle pas (
iteration-count: 1,fill-mode: forwards) — elle ne constitue pas un contenu animé automatique au sens WCAG 2.2.2 (aucune lecture en boucle sans interaction).
Compatibilité navigateur
Nécessite CSS 3D transforms et CSS animations — supportés depuis Chrome 36, Firefox 16, Safari 9. Zéro dépendance externe.
Sans support <code>rotateX</code>, les lettres restent plates — le texte est parfaitement lisible. Sur mobile (pas de hover), les caractères sont affichés normalement, sans animation.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<!-- Le JS découpe le textContent en spans avec animation-delay au chargement -->
<span class="demo-text text-flip" id="flipText">VOTRE TEXTE</span>
<!-- Après init JS, devient : -->
<!-- <span class="demo-text text-flip" id="flipText">
<span style="animation-delay: 0s">V</span>
<span style="animation-delay: 0.05s">O</span>
...
</span> -->
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| font-size sur .demo-text | 2,5 rem | Taille des caractères — augmentez à 4–7 rem pour un titre hero, réduisez à 1 rem pour la navigation. |
| font-weight sur .demo-text | 800 | Graisse du texte. 900 accentue le retournement (caractère plus large) ; 400 donne un flip plus fin. |
| animation-delay : ${0.05 × t}s dans le JS (ligne calcul) | 0,05 s/car. | Incrément du stagger entre chaque lettre. Réduire à 0,03 s pour une cascade rapide sur les mots longs ; monter à 0,08 s pour un effet lent et dramatique. |
| durée dans .text-flip:hover span (animation: .6s) | 0,6 s | Durée du retournement d'un seul caractère. 0,3 s = vif et sec ; 1 s = lent et cinématique. |
| transition dans .text-flip span (transition: transform .3s) | 0,3 s | Vitesse de retour au repos quand la souris quitte l'élément. Réduire à 0,1 s pour un snap immédiat. |
| rotateX dans @keyframes flipChar à 50% | rotateX(90deg) | Axe de retournement. Remplacez par rotateY(90deg) pour un flip latéral (gauche–droite) au lieu d'un flip vertical. |
| perspective sur .text-flip (à ajouter) | aucune | Ajouter perspective: 300px sur le parent .text-flip ajoute un effet de profondeur 3D prononcé au retournement. |
| letter-spacing sur .demo-text | -0,02 em | Espacement des lettres. Augmenter à 0,1–0,2 em aère la cascade et rend chaque flip plus distinct visuellement. |
FAQ
getElementById('flipText') — un seul élément par page. Pour plusieurs instances, dupliquez la logique de découpage dans un querySelectorAll('.text-flip') et itérez : document.querySelectorAll('.text-flip').forEach(el => { el.innerHTML = el.textContent.split('').map((c, i) => `<span style="animation-delay:${i*.05}s">${c}</span>`).join(''); }).:hover ne s'active pas sur les appareils tactiles sans pointeur. Pour une interaction touch, ajoutez un listener touchstart qui pose une classe .flipping sur l'élément et déclenchez l'animation via cette classe plutôt que :hover.@media (prefers-reduced-motion: reduce) { .text-flip:hover span { animation: none; } }. Le texte reste lisible et interactif sans animation de retournement.
