Tilt 3D
Un élément bascule de 10° en avant et 10° à gauche au survol — inclinaison 3D fixe CSS, sans JavaScript, identique quelle que soit la position du curseur dans l'élément.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0352-root centre un bloc .hover-box.hover-tilt de 200 × 200 px sur fond #0a0a0f. La propriété transform-style: preserve-3d autorise le contexte 3D ; la transition transform .3s adoucit l'entrée et la sortie du survol.
Au survol (ou au focus), la règle .hover-tilt:hover applique transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) : l'élément bascule de 10° vers le bas et de 10° vers la gauche, avec la perspective définie à 1 000 px. L'angle est identique quelle que soit la position du curseur dans l'élément — contrairement à un tilt interactif comme fx-0003 qui suit précisément la souris. overflow: hidden retaille le contenu si l'élément grossissait au survol, mais ici le transform seul est utilisé.
La transition inverse joue à la sortie du survol. Mesuré dans Chromium 151 : entrée en 300 ms, sortie en 300 ms, l'angle reste constant quelle que soit la position d'entrée de la souris, deux copies sur une page — seule celle survolée s'incline. Le WebKit de Playwright aplatit toute 3D CSS : le rendu sur un vrai Safari n'a pas été vérifié.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, le CSS supprime la transition et annule le transform au survol et au focus — l'élément reste à plat. L'état survol reste visible via l'outline de focus et le curseurpointer. - Clavier : l’élément est un
<button>nativement focusable. La règle:focus-visibledéclenche le même transform 3D qu’au survol, avec un contour de 2 px indigo. - Toucher :
:hoverreste actif sur un premier toucher sur mobile ; l'inclinaison s'affiche puis reste jusqu'au prochain toucher. L'effet n'est pas annulé surtouchend— comportement CSS natif. - Contenu : l'inclinaison 3D est purement décorative. Le contenu textuel de l'élément reste lisible dans toutes les positions.
Compatibilité navigateur
CSS pur (perspective, rotateX, rotateY, transform-style: preserve-3d, :focus-visible, prefers-reduced-motion), aucun JavaScript. Mesuré dans Chromium 151 : angle constant, deux copies indépendantes, mouvement réduit actif. Le WebKit de Playwright aplatit toute 3D CSS : le vrai Safari n'a pas été vérifié.
Sans perspective ou transform-style: preserve-3d (navigateurs très anciens), l'élément reste plat et rien ne se passe au survol — le contenu reste accessible.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0352-root">
<button class="hover-box hover-tilt" type="button">
<span>…</span>
</button>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Angle de bascule (CSS — rotateX et rotateY) |
10 ° et −10 ° | Augmentez pour un effet plus prononcé (20deg), réduisez pour un effet subtil (5deg). Mettez rotateY(10deg) (positif) pour basculer à droite au lieu de la gauche. |
Distance de perspective (CSS — perspective(1000px)) |
1 000 px | Réduire à 400–600 px accentue la déformation ; au-dessus de 2 000 px l'inclinaison devient quasiment imperceptible. |
Durée de la transition (CSS — transition: transform .3s) |
300 ms | .2s rend l'effet plus vif, .5s le rend plus doux. Ajoutez la propriété d'accélération : ease-out rend l'arrivée plus naturelle. |
Profondeur du box-shadow (CSS — ajouter à .hover-tilt:hover) |
aucune ombre | Ajoutez box-shadow: 0 20px 40px rgba(0,0,0,.4) pour renforcer l'impression de lévitation de la carte. |
Taille de l'élément (CSS — width / height) |
200 × 200 px | L'inclinaison s'applique quelle que soit la taille. Sur des éléments larges (> 400 px), considérez réduire rotateX et rotateY à 5–8° pour éviter une déformation trop forte aux coins. |
FAQ
perspective, rotateX et rotateY sont supportées depuis Safari 9 sur macOS et iOS 9..fx-0352-root. Aucun JavaScript n'est utilisé, donc il n'y a pas de risque de conflit entre plusieurs instances.
