Composants

rotate

Explorez les aperçus interactifs, trouvez les bons composants et intégrez les composants ouverts à votre projet avec leur code source.

Créer à partir d’un guide Connectez votre agent Explorer les modèles de pages

21 sur 21

1623Rotate iconIcônesUn anneau ouvert avec une seule pointe de flèche qui tourne d'un quart de tick à la fois, plus une clé qui se tourne sur place.

Two face flip button

1661Two face flip buttonBoutonsUn bouton avec deux faces empilées qui tournent l'une devant l'autre en 3D en survol, l'avant s'inclinant vers un bord choisi tandis que l'arrière pivote pour prendre sa place.

Rotating face plate

1742Rotating face plateBoutonsUn bouton dont la plaque sombre étiquetée tourne un coin et grandit lorsqu'elle est activée, exposant la dalle d'accent située en dessous sous la forme de quatre triangles, puis rétrécit et échange les couleurs avec elle lorsqu'elle est enfoncée.

Keyframe morph loop

1782Keyframe morph loopAnimationUn carré qui exécute une routine en boucle consistant à grandir, tourner et arrondir en cercle, en se tenant à chaque pose car les arrêts de timing sont inégaux.

Spin count tile

1807Spin count tileAnimationUn carré qui tourne un certain nombre de fois à la demande et atterrit à nouveau en carré, avec un léger arc indiquant la distance parcourue dans le tour.

Card Shuffle Stack

1846Card Shuffle StackCartesUne pile de panneaux en éventail qui fonctionne selon une minuterie : le panneau avant tombe, le reste avance et celui qui est tombé bascule à l'arrière.

Stitched disc button

1893Stitched disc buttonBoutonsUn disque de bouton de couture moulé et incliné qui se redresse et s'étire pour former une pilule étiquetée en survol ou en mise au point.

Tilting Rocket Button

1899Tilting Rocket ButtonBoutonsUn bouton de lancement sombre dont le glyphe de fusée incliné se redresse et glisse vers l'avant tandis que l'étiquette suit derrière.

Letter roll in

1991Letter roll inEffets de texteUne ligne de texte où chaque personnage se retourne sur un axe horizontal, l'ancien visage roulant tandis qu'un visage identique arrive par le bas.

Rotating backer button

2025Rotating backer buttonBoutonsUne plaque sombre avec un panneau teinté caché juste derrière elle qui tourne d'un demi-tour en survol tandis que la lumière s'étendant sur ses bords s'étend plus largement.

Compass bar grid

2127Compass bar gridAnimationUne grille de barres courtes qui tournent toutes pour pointer vers le pointeur, de sorte que le champ se lit comme de la limaille de fer trouvant un aimant.

Tilting Backer Tile

2450Tilting Backer TileBoutonsUne tuile carrée translucide avec une plaque de couleur unie placée exactement derrière elle qui s'incline sous la face en survol.

Word Swap Rotator

2465Word Swap RotatorEffets de texteUn mot d'une ligne est remplacé par le suivant dans une courte liste toutes les quelques secondes, faisant glisser l'ancien mot vers le haut et vers l'extérieur tandis que le nouveau glisse vers le haut et l'intérieur.

Pivot bars menu button

2503Pivot bars menu buttonBoutonsUn bouton de menu dont les trois barres irrégulières oscillent d'un quart de tour et se rétrécissent en une courte colonne de points, changeant de couleur au fur et à mesure.

Plus to cross tile

2512Plus to cross tileBoutonsUne petite tuile carrée portant un signe plus qui tourne de quarante-cinq degrés en une croix serrée et gonfle d'une fraction en tournant.

Plane tilt send button

2545Plane tilt send buttonBoutonsUn contrôle d'envoi en forme de cuvette dont l'avion en papier se renverse en survol et sort du cadre au clic avant que l'étiquette ne se réinitialise.

Quarter Turn Add Button

2568Quarter Turn Add ButtonBoutonsUn plus encerclé qui tourne d'un quart de tour et s'inonde en continu lorsqu'on le pointe, puis se retourne instantanément en un léger mouvement lorsqu'on le tient.

Brushed metal knob

2642Brushed metal knobBoutonsUn cadran rond usiné avec une finition radiale brossée et une étiquette gravée qui tourne lentement d'un quart de tour en vol stationnaire.

Hinged plate button

2687Hinged plate buttonBoutonsDeux plaques d'étiquettes identiques se trouvent exactement l'une sur l'autre et s'écartent en survol, comme une paire de portes tournant en perspective.

Plane straighten send

2701Plane straighten sendBoutonsUn bouton d'envoi construit comme une coque bordée autour d'une pilule insérée, où un plan en papier incliné tourne de niveau et l'étiquette avance en survol.

2716Icon badge sendBoutonsUn bouton d'envoi arrondi dont le glyphe se trouve dans un badge circulaire translucide qui s'éclaire et tourne tandis que l'ensemble du bouton se soulève au survol et se stabilise à la pression.

Comparer ces composants

Choisissez selon le comportement et la mise en page, puis vérifiez les frameworks disponibles et les conditions d’accès sur la page de chaque composant.

Brushed metal knob
Un cadran rond usiné avec une finition radiale brossée et une étiquette gravée qui tourne lentement d'un quart de tour en vol stationnaire.
Card Shuffle Stack
Une pile de panneaux en éventail qui fonctionne selon une minuterie : le panneau avant tombe, le reste avance et celui qui est tombé bascule à l'arrière.
Compass bar grid
Une grille de barres courtes qui tournent toutes pour pointer vers le pointeur, de sorte que le champ se lit comme de la limaille de fer trouvant un aimant.

Conseils de design

Ouvrir l’index complet

Étiquettes

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)billing (10)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (7)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (13)finance (10)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (50)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)log (3)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)product (6)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (21)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)workflow (18)workspace (36)wrapper (3)zoom (4)