Installation

Usage

import StackPagination from "@/components/ruixen/stack-pagination";
 
export default function App() {
  return <StackPagination totalPages={20} visibleCount={5} />;
}

Props

Features

• 3D Card Stack: Cards appear stacked with depth using z-transforms
• Flip Animation: Click cards to flip and see back content
• Perspective: Uses CSS perspective for 3D depth effect
• Smart Pagination: Shows ellipsis (...) for large page counts
• Hover Effects: Cards lift up on hover with z-axis translation

Interactions

• Click Card: Flip card to see back content
• Hover: Card lifts up with 3D transform
• Prev/Next Buttons: Navigate through pages
• Active State: Current page card appears elevated

3D Effects

The component uses CSS transforms for 3D effects:

• perspective(1200px) on container
• transformStyle: "preserve-3d" on cards
• rotateY(180deg) for flip animation
• z translations for depth stacking