Commande fournitures — 14 novembre 2026
FournisseurOffice Pro Dist.
Réf.A4 80g × 10 ramettes
Qté10 cartons
Prix unitaire42,00 € HT
Total HT420,00 €
HoverGratuit
Scale & Rotate
Une boîte qui grossit de 10 % et pivote de 5° au survol en 0,4 s — cubic-bezier avec léger dépassement, box-shadow violet, pure CSS sans JS.
Mis à jour le
Survolez ou cliquez la scène pour interagir
Cet effet est gratuit — la catégorie Hover en contient 48 au total, dont 5 gratuits. Effect.Labs regroupe 840 effets vanilla. Découvrir la catégorie →
Exemples d'usage
🥗 NutriPlan
Semaine du 11 nov.
Déjeuner mardi
Pas d'idée ?
Survolez le dé pour piocher une suggestion au hasard
Artistes près de chez vous
124 résultats
Comment ça marche
La racine .fx-0343-root (250 px de haut) centre un bouton de 200 px de côté. Au survol, transform: scale(1.1) rotate(5deg) agrandit l'élément de 10 % et le fait pivoter de 5° dans le sens horaire. La transition dure 0,4 s avec la courbe cubic-bezier(0.175, 0.885, 0.32, 1.275) : départ rapide, dépassement léger en fin de course, puis recul élastique d'environ 2° avant de se stabiliser. Un box-shadow violet (rgba(99, 102, 241, 0.3)) apparaît en même temps, renforçant l'impression de profondeur.
La propriété transition: all s'applique à toutes les propriétés CSS de l'élément. Pour limiter l'effet aux seules propriétés animées et éviter des recalculs inutiles, remplacez all par transform 0.4s, box-shadow 0.4s (voir la section Personnaliser). Pure CSS, aucun JavaScript. Les deux règles :hover et :focus-visible déclenchent le même visuel, et tabindex est porté par la balise button.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, toutes les transitions sont supprimées et letransformest neutralisé au survol : l'élément reste à sa taille et son angle d'origine. Lebox-shadowviolet apparaît encore instantanément pour signaler le focus ou le survol. - Clavier : l'élément est un
<button>nativement focusable. La règle:focus-visibledéclenche la même mise à l'échelle et rotation que le survol, avec un contour indigo de 2 px en plus. La rotation peut surprendre à l'œil : remplacez la cible par un vrai lien ou bouton dans votre interface pour que le contexte soit clair. - Toucher : sur écran tactile, le tap active le survol CSS dans la plupart des navigateurs mobiles. L'effet se dissipe quand le doigt quitte l'élément ou que le focus passe ailleurs.
- Rotation et lecture d'écran : la rotation est purement visuelle. Les lecteurs d'écran lisent le texte de l'élément sans tenir compte de la transformation. Choisissez un libellé parlant si vous adaptez cet effet.
Compatibilité navigateur
Pure CSS, aucune dépendance. Propriétés utilisées : transform 2D, transition, box-shadow, cubic-bezier, :focus-visible. Vérifié dans Chromium et Firefox : même rendu, dépassement élastique visible, deux copies indépendantes, 0 erreur JS. :focus-visible nécessite Chrome 86+, Firefox 85+, Safari 15.4+ — sur les versions antérieures, le focus clavier ne déclenche pas l'effet visuel.
Chrome 86+✓ Complet (mesuré)
Firefox 85+✓ Complet (mesuré)
Safari 15.4+✓ Complet (:focus-visible)
Edge 86+✓ Complet (moteur Chromium)
Mobile iOS 15.4+✓ Complet
Android Chrome 86+✓ Complet (mesuré)
Sans :focus-visible (navigateurs antérieurs à 2021), le focus clavier n'active pas l'effet visuel — l'élément reste lisible et cliquable, l'animation est absente au clavier uniquement.
Le code
Copiez les deux blocs (HTML et CSS) dans votre page. Aucun JavaScript, aucune dépendance.
HTML
<div class="fx-0343-root">
<button class="hover-box hover-scale-rotate" type="button">
<span>Scale & Rotate</span>
</button>
</div>
CSS
.fx-0343-root,
.fx-0343-root *,
.fx-0343-root *::before,
.fx-0343-root *::after {
box-sizing: border-box
}
.fx-0343-root {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
background: rgb(26, 26, 36);
color: rgb(255, 255, 255);
font-family: sans-serif;
}
/* Variables du design system du site, dont ce code dépend (valeurs de css/style.css — à adapter librement). */
.fx-0343-root {
--bg-card: #12121a;
--border: rgba(255, 255, 255, 0.08);
--radius-xl: 1rem;
}
.fx-0343-root .hover-box {
width: 200px;
height: 200px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
cursor: pointer;
position: relative;
overflow: hidden;
font: inherit;
color: inherit;
-webkit-appearance: none;
appearance: none;
}
.fx-0343-root .hover-scale-rotate {
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.fx-0343-root .hover-scale-rotate:hover {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3);
}
.fx-0343-root .hover-scale-rotate:focus-visible {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3);
outline: 2px solid #6366f1;
outline-offset: 3px;
}
.fx-0343-root .hover-box span {
position: relative;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.fx-0343-root * {
transition: none !important;
animation-play-state: paused !important;
}
.fx-0343-root .hover-scale-rotate:hover,
.fx-0343-root .hover-scale-rotate:focus-visible {
transform: none;
}
}
JavaScript
CSS pur — aucun JavaScript requis.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Facteur d'agrandissement (CSS — scale(1.1)) |
1.1 (10 %) | scale(1.05) donne un effet plus discret ; scale(1.15) plus marqué. Au-delà de 1.2 sur un écran 390 px, les bords peuvent déborder du cadre. |
Angle de rotation (CSS — rotate(5deg)) |
5° | Valeur positive : sens horaire ; négative : sens antihoraire. 0 supprime la rotation et ne laisse que l'agrandissement. |
Durée (CSS — 0.4s) |
0,4 s | 0,2 s est plus vif ; 0,6 s plus paresseux. Augmenter la durée estompe le dépassement élastique de la courbe. |
Courbe (CSS — cubic-bezier(0.175, 0.885, 0.32, 1.275)) |
dépassement léger | ease-out supprime le dépassement ; cubic-bezier(0.68, -0.55, 0.265, 1.55) amplifie le ressort. |
Couleur de la box-shadow (CSS — rgba(99, 102, 241, 0.3)) |
indigo à 30 % | Remplacez la couleur pour l'adapter à votre palette ; mettez 0 pour supprimer l'ombre. |
Transition ciblée (CSS — all) |
toutes les propriétés | Remplacer par transform 0.4s cubic-bezier(...), box-shadow 0.4s limite l'animation aux propriétés pertinentes et allège le recalcul CSS. |
FAQ
Comment supprimer la rotation et ne garder que l'agrandissement ?
Remplacez transform: scale(1.1) rotate(5deg) par transform: scale(1.1). La courbe élastique reste active, vous obtenez un effet de rebond vertical pur.
L'effet déborde sur les éléments voisins dans ma grille. Comment l'isoler ?
Ajoutez isolation: isolate sur le conteneur parent ou overflow: hidden si vous acceptez que l'ombre soit rognée. z-index: 1 sur la cible assure qu'elle passe au-dessus de ses voisins.
Sur téléphone, l'effet persiste après le tap. Comment le corriger ?
Ajoutez en JavaScript un écouteur touchend sur l'élément qui retire le focus : el.addEventListener('touchend', () => el.blur()). Sur la plupart des navigateurs mobiles modernes, cela suffit à libérer l'état :hover.
