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
3D Cube - happy face3D Cube - Happy Face
$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.

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

PropertyTypeDefaultDescription
childrenReactNode-The content to animate
activebooleantrueWhether the animation is active
classNamestring""Additional CSS classes
depthnumber500The depth of the perspective
durationstring"6s"The duration of the animation
delaystring"0s"The delay of the animation

Usage Examples

Perspective Animation
Perspective Animation
Perspective Animation