---
title: "Rotate3D — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Gaurav Design · Backgrounds. This is a 3D Interactive Component."
canonical: "https://framer.elliotli.dev/component/rotate3d"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Rotate3D

# Rotate3D

This is a 3D Interactive Component.

[View on Framer](https://framer.com/marketplace/components/rotate3d/?via=elliot-li)

![Rotate3D preview image 1](https://framer.elliotli.dev/og/component/rotate3d/8468b063347b7fb9/1600x1200.jpg)

## Summary

This is a 3D Interactive Component.

## Description

This is a 3D Interactive Component that transforms any child element into an interactive 3D object that responds to mouse movement. Here’s a comprehensive description: **Core Functionality:** The component creates a 3D transformation effect on its content, allowing users to rotate and manipulate objects in 3D space using mouse interactions. It supports two interaction modes: drag-to-rotate and hover-to-follow. **Key Features:** 1\. **Dual Interaction Modes:** \- **Drag Mode (default):** Click and drag to manually rotate the object in any direction with full 360-degree rotation capability - **Hover Mode:** The object automatically follows your cursor position across the entire viewport, creating a dynamic tracking effect 2. **Customizable Controls:** - **Sensitivity (0.1-5):** Adjusts how responsive the rotation is to mouse movement - higher values create more dramatic rotations - **Dragging Toggle:** Switch between drag-to-rotate and hover-to-follow modes - **Rotation Limit (0-180°):** Sets maximum rotation angles (though currently allows 360° rotation in practice) - **Perspective (100-3000px):** Controls the 3D depth effect - lower values create more dramatic perspective, higher values create subtler effects 3. **Initial Positioning:** \- Set starting X and Y rotation angles (-180° to 180°) to position your object at a specific angle when the component loads 4. **Visual Customization:** \- **Background Color:** Fully customizable background (defaults to transparent) - **Content Slot:** Insert any Framer component or element as the 3D object - Smooth transitions with easing for natural movement 5. **Technical Details:** - Uses CSS 3D transforms with \`preserve-3d\` for authentic 3D rendering - Viewport-wide cursor tracking in hover mode for seamless interaction - Minimum 5×5px size ensures visibility on canvas - Overflow hidden to prevent background elements from appearing outside bounds - Optimized with React transitions for performance **Use Cases:** Perfect for product showcases, interactive cards, portfolio pieces, hero sections, or any element you want to add engaging 3D interactivity to..

## Rank history [How rankings work →](/terms#rankings)

-   All · #3262

## Details

- **Author**: Gaurav Design
- **Price**: $5.00
- **Published**: 2026-06-07
- **Updated**: 2026-06-16
- **Added**: 2026-06-02
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background