Letter Rotate In
Chaque lettre bascule depuis 90° sur l'axe Y pour se révéler face à l'observateur — une cascade 3D pilotée par CSS seul.
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
L'effet repose sur un @keyframes rotateInLetter qui anime chaque lettre de rotateY(90deg) opacity:0 à rotateY(0deg) opacity:1. Les lettres partent en tranche — invisibles de face, comme une tuile vue de côté — et pivotent vers l'observateur. Le mode animation-fill-mode: forwards maintient l'état final : aucun JS ne gère l'opacité après coup.
La perspective: 500px posée sur le conteneur .text-rotate-in établit le point de fuite 3D commun à toutes les lettres. Réduire cette valeur (200px) accentue la distorsion perspectivique ; l'augmenter (1000px) rend la rotation quasi-planaire et plus subtile.
La cascade est obtenue par un animation-delay croissant injecté en style inline sur chaque <span> (step × index). La fonction splitText(el, texte, step) reconstruit ces spans à la volée pour le bouton Replay — mais l'animation initiale peut être entièrement servie en HTML statique pré-généré sans aucun JS à l'initialisation.
Accessibilité
- prefers-reduced-motion absent : aucune règle
@media (prefers-reduced-motion: reduce)dans le CSS — les lettres s'animent toujours. Correctif recommandé :.text-rotate-in span { animation: none; opacity: 1; transform: none; }dans cette media query. - Texte dans des
<span>natifs sansaria-hidden— les lecteurs d'écran lisent les lettres comme le mot complet. Contenu accessible sans balise supplémentaire. - Le bouton Replay est un
<button>natif, accessible au clavier (Tab + Enter/Espace). - Contraste texte/fond dans la démo : blanc sur
#0a0a0f, ratio ≈ 21:1 — conforme WCAG AAA (≥ 7:1). - Repli sans animation : si
animationn'est pas supporté, les lettres restent àopacity:0(état initial). Protéger avec@supports not (animation-name: none) { .text-rotate-in span { opacity: 1; transform: none; } }.
Compatibilité navigateur
Nécessite CSS 3D transforms (rotateY) et animation-fill-mode: forwards — supportés depuis Chrome 36, Firefox 16, Safari 9, Edge 12. Zéro dépendance externe.
Sans support des CSS 3D transforms, les lettres restent à <code>opacity:0</code> (état de départ). Protéger avec <code>@supports not (transform: rotateY(0)) { .text-rotate-in span { opacity:1; transform:none; } }</code>.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<span class="demo-text text-rotate-in" id="rotateInText">
<!-- une <span> par lettre avec animation-delay = step × index -->
<span style="animation-delay: 0s">M</span>
<span style="animation-delay: 0.08s">O</span>
<span style="animation-delay: 0.16s">T</span>
<span style="animation-delay: 0.24s">S</span>
</span>
<button class="replay-btn" onclick="replayRotateIn()">Replay</button>
</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 |
|---|---|---|
| perspective sur .text-rotate-in | 500px | Profondeur 3D : 200px = basculement saccadé et expressif, 1000px = rotation quasi-planaire. Réduire pour dramatiser l'effet. |
| animation-duration dans .text-rotate-in span | .5s | Durée d'animation de chaque lettre. .3s = reveal vif, 1s = entrée dramatique et lente. |
| animation-timing-function dans .text-rotate-in span | ease | Courbe d'accélération. ease-out = atterrissage progressif, cubic-bezier(0.34,1.56,0.64,1) = légère élasticité à l'arrivée. |
| rotateY(90deg) dans .text-rotate-in span | 90deg | Angle de départ. rotateY(-90deg) = flip depuis l'autre côté, rotateX(90deg) = rotation verticale (effet 'chute de tuile'). |
| step dans splitText(el, texte, step) | 0.08 | Écart en secondes entre chaque lettre. 0.04 = cascade rapide, 0.15 = cascade théâtrale. |
| font-size sur .demo-text | 2.5rem | Taille du texte. L'effet est plus spectaculaire entre 4 et 8rem où la profondeur 3D se perçoit clairement. |
| letter-spacing sur .demo-text | -.02em | Espacement entre lettres. Des valeurs positives (0.1em) espacent les tuiles pour un décalage visuel plus marqué. |
FAQ
@keyframes, transform 3D et animation. Le JS ne sert qu'au bouton Replay. La liste de <span> avec animation-delay peut être générée côté serveur ou en statique, sans aucun JS à la volée.animation-play-state: paused puis passez à running via une classe ajoutée par un IntersectionObserver. Exemple : el.classList.add('lri-visible') combiné à .lri-visible .text-rotate-in span { animation-play-state: running; }.@keyframes rotateOutLetter (de rotateY(0deg), opacity:1 à rotateY(-90deg), opacity:0) et l'appliquer via une classe de sortie. L'enchaînement entrée/sortie crée un ticker typographique réutilisable.
