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

Copy and paste the following code into your project.

Add this component perspective-animation.tsx to your project.

perspective-animation.tsx

"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>
  );
}

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>

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