transform CSS Effects — 5986 Free Examples (Page 46)

Live preview Navigation

Coupon Clip Corner Nav

Nav items styled as coupons with clipped circular corners.

#hover #gradient #transform

Live preview Navigation

Circle Background Breadcrumbs

Breadcrumbs with circular item backgrounds.

#hover #gradient #transform

Live preview Navigation

Diagonal Arrow Breadcrumbs

Breadcrumbs with diagonal arrow separators.

#hover #transform

Live preview Navigation

Dot Separator Breadcrumbs

Breadcrumbs with dot separators.

#hover #transform

Live preview Navigation

Dotted Trail Breadcrumbs

Breadcrumbs with dotted connecting lines.

#hover #transform #border

Live preview Navigation

Floating Arrow Breadcrumbs

Breadcrumbs with floating arrow separators on hover.

#hover #transform

Live preview Navigation

Glow Trail Breadcrumbs

Breadcrumbs with a glowing connecting trail.

#hover #transform #shadow

Live preview Navigation

Hover Rotate Breadcrumbs

Breadcrumbs that rotate slightly on hover.

#hover #gradient #transform

Live preview Navigation

Vertical Line Breadcrumbs

Vertical breadcrumbs with line connectors.

#hover #transform #shadow

Live preview Navigation

Wavy Trail Breadcrumbs

Breadcrumbs with wavy connecting separators.

#hover #transform

Live preview Navigation

Curtain Fall Reveal Nav

Nav links revealed as a curtain falls downward on hover.

#hover #gradient #transform

Live preview Navigation

Curtain Rise Reveal Nav

Nav links revealed as a curtain rises upward on hover.

#hover #gradient #transform

Live preview Navigation

3D Dot Nav

3D extruded dot navigation.

#hover #gradient #transform

Live preview Navigation

Circle Dot Nav

Dot navigation in a circle container.

#hover #gradient #transform

Live preview Navigation

Floating Bottom Dot Nav

Floating dot navigation at bottom.

#hover #gradient #transform

Live preview Navigation

Floating Left Dot Nav

Floating dot navigation on left with shadow.

#hover #transform #shadow

Live preview Navigation

Floating Right Dot Nav

Floating dot navigation with shadow.

#hover #gradient #transform

Live preview Navigation

Floating Top Dot Nav

Floating dot navigation at top.

#hover #transform #shadow

Live preview Navigation

Gradient Dot Nav

Dot nav with gradient active dot.

#hover #gradient #transform

Live preview Navigation

Vertical Left Dot Nav

Vertical dot navigation fixed to left side.

#hover #transform #shadow

Live preview Navigation

Vertical Right Dot Nav

Vertical dot navigation fixed to right side.

#hover #transform #shadow

Live preview Navigation

3D Perspective Drawer Navbar

Drawer with a 3D perspective active link lifting forward.

#hover #transform #shadow

Live preview Navigation

Brutalist Block Drawer Navbar

Drawer with raw brutalist block styling, sharp borders, and offset shadow.

#hover #transform #shadow

Live preview Navigation

Collapsible Arrow Drawer Navbar

Drawer with collapsible sections toggled by an arrow indicator.

#hover #transform

Live preview Navigation

Floating Overlay Drawer Navbar

Floating drawer that overlays content without pushing it.

#hover #animation #transform

Live preview Navigation

Glow Edge Drawer Navbar

Drawer with a glowing active edge in indigo neon.

#hover #transform #shadow

Live preview Navigation

Nested Accordion Drawer Navbar

Accordion drawer with expandable sections revealing sub-links.

#hover #transform

Live preview Navigation

Blur Overlay Drawer Navbar

Drawer over a frosted blurred backdrop.

#hover #animation #gradient

Live preview Navigation

Dim Overlay Drawer Navbar

Drawer over a dimmed dark overlay backdrop.

#hover #animation #transform

Live preview Navigation

3D Left Drawer Navbar

Left drawer with 3D perspective slide revealing main nav beside it.

#hover #animation #gradient

Live preview Navigation

3D Right Drawer Navbar

Right drawer with 3D perspective slide.

#hover #animation #gradient

Live preview Navigation

Square Sharp Drawer Navbar

Drawer with sharp square corners and bold contrast.

#hover #transform #border

Live preview Navigation

Fading Dropdown Menu

The submenu drops a few pixels and fades in, staying open while the pointer is inside.

#hover #transform #shadow

Live preview Navigation

3D Flip Card Navbar

Each link is a 3D flip card revealing a back face on hover.

#hover #transform #3d

Live preview Navigation

Horizontal Flip Navbar

Links flip horizontally (Y-axis) on hover for a side reveal.

#hover #transform #3d

Live preview Navigation

Vertical Flip Navbar

Links flip vertically (X-axis) on hover for a top-down reveal.

#hover #transform #3d

Live preview Navigation

Floating Action Navbar

Navbar with floating action-style buttons.

#hover #gradient #transform

Live preview Navigation

Hamburger Morph Button

Three bars rotate and collapse into a clean cross when the menu is opened.

#transform #menu

Live preview Navigation

Circle Icon Nav

Icon nav with circular icons.

#hover #gradient #transform

Live preview Navigation

Floating Icon Nav

Floating icon navigation with shadow.

#hover #gradient #transform

Live preview Navigation

Iris Aperture Spin Nav

Iris aperture blades that spin open like a camera shutter on hover.

#hover #transform

Live preview Navigation

Iris Aperture Zoom Nav

Iris aperture that zooms open to reveal nav links in the center.

#hover #gradient #transform

Live preview Navigation

Lift Soar Navbar

Links lift and soar upward with strong shadow projection.

#hover #transform #shadow

Live preview Navigation

Accordion Menu

Accordion menu with expandable sections.

#hover #transform

Live preview Navigation

Hover Dropdown Menu

Dropdown menu revealed on hover.

#hover #transform #shadow

Live preview Navigation

Flyout Menu

Menu with flyout submenu on hover.

#hover #transform #shadow

Live preview Navigation

Horizontal Dropdown Menu

Horizontal menu with dropdown items.

#hover #transform #shadow

Live preview Navigation

Mega Menu

Large mega menu panel with multiple link groups.

#hover #transform #shadow

Live preview Navigation

Full Overlay Menu

Full screen overlay menu.

#hover #transform

Live preview Navigation

Rotate In Menu

Menu that rotates in from corner.

#hover #transform #shadow

Live preview Navigation

Slide In Menu

Menu that slides in from the left.

#hover #transform #shadow

Live preview Navigation

Zoom In Menu

Menu that zooms in from trigger.

#hover #transform #shadow

Live preview Navigation

3D Perspective Modal Navbar

Modal nav that flies in from depth using perspective translateZ.

#hover #animation #transform

Live preview Navigation

Blurred Backdrop Modal Navbar

Centered modal nav over a heavily blurred colored backdrop.

#hover #animation #gradient

Live preview Navigation

3D Flip In Modal Navbar

Centered modal nav that flips in on the Y axis with 3D depth.

#hover #animation #transform

Live preview Navigation

Fullscreen Modal Cover Navbar

Fullscreen modal cover with large centered nav links.

#hover #animation #transform

Live preview Navigation

Glass Popup Modal Navbar

Glassmorphism modal popup nav with frosted translucent surface.

#hover #animation #gradient

Live preview Navigation

Slide Down Modal Navbar

Centered modal nav that slides down from the top.

#hover #animation #gradient

Live preview Navigation

Zoom In Modal Navbar

Centered modal nav that zooms in from a smaller scale.

#hover #animation #gradient

Live preview Navigation

Circular Orbit Menu

Center button with menu items orbiting in a circle around it.

#hover #gradient #transform

Live preview Navigation

Planet Rotation Menu

Center sun with planet items rotating around it on a continuous orbit path.

#hover #animation #gradient

Live preview Navigation

Radial Burst Menu

Items burst outward radially from a center trigger with staggered timing.

#hover #transform #shadow

Live preview Navigation

Ring Spin Menu

Menu items arranged on a ring that continuously rotates with hover-pause.

#hover #animation #gradient

Live preview Navigation

Solar System Menu

Solar system layout with planets on concentric orbit rings of different speeds.

#hover #animation #gradient

Live preview Navigation

Dark Blurred Overlay Navbar

Dark overlay with heavy backdrop blur covering the page content.

#hover #animation #gradient

Live preview Navigation

Bottom Sheet Handle Navbar

Bottom sheet with a draggable handle and pull-up indicator.

#hover #animation #gradient

Live preview Navigation

Side Panel Tabs Navbar

Side panel with vertical tabs over a dimmed overlay.

#hover #animation #gradient

Live preview Navigation

Active 3D Pagination

Active page lifts in 3D perspective.

#hover #gradient #transform

Live preview Navigation

Active Border Pagination

Active page has animated border.

#hover #transform #border

Live preview Navigation

Active Fill Pagination

Active page fills with color animation.

#hover #transform

Live preview Navigation

Active Rotate Pagination

Active page rotates slightly.

#hover #transform #shadow

Live preview Navigation

Active Scale Pagination

Active page scales up with bounce.

#hover #transform #shadow

Live preview Navigation

Active Shadow Pagination

Active page has deep shadow.

#hover #transform #shadow

Live preview Navigation

Arrow Bounce Pagination

Pagination with bouncing arrow buttons on hover.

#hover #animation #transform

Live preview Navigation

Arrow Slide Pagination

Pagination with sliding arrows on hover.

#hover #transform

Live preview Navigation

Circular Pagination

Pagination with circular number buttons.

#hover #gradient #transform

Live preview Navigation

Dots Pagination

Pagination as a row of dots with active state.

#hover #transform #shadow

Live preview Navigation

Floating Pagination

Pagination with floating shadow on hover.

#hover #transform #shadow

Live preview Navigation

Hover 3D Pagination

Numbers lift in 3D on hover.

#hover #gradient #transform

Live preview Navigation

Hover Flip Pagination

Numbers flip on hover.

#hover #transform #3d

Live preview Navigation

Hover Grow Pagination

Pages grow on hover.

#hover #transform

Live preview Navigation

Hover Rotate Pagination

Numbers rotate on hover.

#hover #transform

Live preview Navigation

Hover Shrink Pagination

Inactive numbers shrink, active stays normal.

#hover #transform

Live preview Navigation

Hover Underline Pagination

Numbers show underline on hover.

#hover #transform

Live preview Navigation

Infinite Scroll Pagination

Animated loading indicator for infinite scroll.

#animation #transform

Live preview Navigation

Load More Pagination

Single load more button pagination.

#hover #transform #shadow

Live preview Navigation

Load More Button Pagination

Stylized load more button with shimmer.

#hover #animation #gradient

Live preview Navigation

Neon Pagination

Dark neon themed pagination.

#hover #transform #shadow

Live preview Navigation

Number 3D Pagination

Numbers with 3D lift on hover.

#hover #gradient #transform

Live preview Navigation

Number Circle Pagination

Numbers in circles with active highlight.

#hover #gradient #transform

Live preview Navigation

Number Flip Pagination

Numbers flip on Y axis on hover.

#hover #transform #3d

Live preview Navigation

Number Grow Pagination

Active number grows larger than others.

#hover #transform #shadow

Live preview Navigation

Number Rotate Pagination

Numbers rotate slightly on hover.

#hover #transform

Live preview Navigation

Number Shrink Pagination

Inactive numbers shrink, active stays large.

#hover #transform #shadow

Live preview Navigation

Number Underline Pagination

Active number has underline indicator.

#hover #transform

Live preview Navigation

Prev Next Pagination

Simple prev/next pagination buttons.

#hover #transform

Popular tags