Perspective Animation
FREE
A perspective animation for elements
Demo
3D Perspective
This card rotates in 3D creating a depth and perspective effect.
Exclusive Launch 50% offspots left: 0 / 50


$39.99
$19.99
Payment once and get lifetime access
Access to all animations
All updates
All animations
No subscriptions
Installation
1
Copy and paste the following code into your project.
Add this component perspective-animation.tsx to your project.
"use client";
import type { ReactNode } from "react";
interface PerspectiveAnimationProps {
children: ReactNode;
duration?: string;
active?: boolean;
delay?: string;
className?: string;
depth?: number;
}
export function PerspectiveAnimation({
children,
duration = "6s",
active = true,
delay = "0s",
className = "",
depth = 500, // Depth of the perspective
}: PerspectiveAnimationProps) {
const animationClass = active ? "animate-custom-perspective" : "";
return (
<div
className={`${className}`}
style={{
perspective: `${depth}px`,
}}
>
<div
className={`${animationClass} transform-gpu`}
style={{
animationDuration: duration,
animationDelay: delay,
transformStyle: "preserve-3d",
}}
>
{children}
</div>
</div>
);
}
3
Start using the component PerspectiveAnimation
<PerspectiveAnimation className="w-full max-w-md" depth={800}>
<div className="rounded-xl bg-gradient-to-br from-zinc-700 to-zinc-800 p-8 shadow-xl">
// Your content here
</div>
</PerspectiveAnimation>
4
Update the import paths to match your project setup.
Usage Example
<PerspectiveAnimation className="w-full max-w-md" depth={800}>
<div className="rounded-xl bg-gradient-to-br from-zinc-700 to-zinc-800 p-8 shadow-xl">
<h3 className="mb-4 text-2xl font-bold text-white">3D Perspective</h3>
<p className="text-white/80">
This card rotates in 3D creating a depth and perspective effect.
</p>
</div>
</PerspectiveAnimation>
// ------------------------------------------------------------
<PerspectiveAnimation depth={1500} className="w-full max-w-md">
<div className="rounded-xl bg-gradient-to-br from-zinc-700 to-zinc-800 p-8 shadow-xl">
// Your content here
<h3 className="mb-4 text-2xl font-bold text-white">3D Perspective</h3>
<p className="text-white/80">
This card rotates in 3D creating a depth and perspective effect.
</p>
</div>
</PerspectiveAnimation>
Properties
The PerspectiveAnimation
component accepts the following props:
Property | Type | Default | Description |
---|---|---|---|
children | ReactNode | - | The content to animate |
active | boolean | true | Whether the animation is active |
className | string | "" | Additional CSS classes |
depth | number | 500 | The depth of the perspective |
duration | string | "6s" | The duration of the animation |
delay | string | "0s" | The delay of the animation |
Usage Examples

