New
New
New
Guide
- Interactive
- 3D
- Elements
Guide
- Interactive
- 3D
- Elements
Guide
- Interactive
- 3D
- Elements
How to Turn 2D Elements into Interactive 3D Objects in Framer
Learn how to turn any 2D element into an interactive 3D object in Framer. I'll show you how to use a secret component to achieve various interactive 3D animations and interactions on your website.
Posted by
Nandi
Table of contents
Getting started
First, start by adding a 2D element to your Framer canvas. This can be an image, a button, or even just a simple shape.
Then very simple, just drop my 3D Look component on the canvas and connect it to any frame.
Once the element is connected to the component, you can check out the right panel and customize its behavior through the component properties.
Here are some key properties you can tweak:
Dragging – By default, dragging is disabled, meaning the element will just look at the cursor. This works great for subtle, responsive interactions.
Rotation limit – Control how much (or how little) the element can rotate.
Getting started
First, start by adding a 2D element to your Framer canvas. This can be an image, a button, or even just a simple shape.
Then very simple, just drop my 3D Look component on the canvas and connect it to any frame.
Once the element is connected to the component, you can check out the right panel and customize its behavior through the component properties.
Here are some key properties you can tweak:
Dragging – By default, dragging is disabled, meaning the element will just look at the cursor. This works great for subtle, responsive interactions.
Rotation limit – Control how much (or how little) the element can rotate.
Getting started
First, start by adding a 2D element to your Framer canvas. This can be an image, a button, or even just a simple shape.
Then very simple, just drop my 3D Look component on the canvas and connect it to any frame.
Once the element is connected to the component, you can check out the right panel and customize its behavior through the component properties.
Here are some key properties you can tweak:
Dragging – By default, dragging is disabled, meaning the element will just look at the cursor. This works great for subtle, responsive interactions.
Rotation limit – Control how much (or how little) the element can rotate.
The properties of the 3D look component.
The properties of the 3D look component.
The properties of the 3D look component.
Let’s walk through this example of an interactive card.
Let’s walk through this example of an interactive card.
Let’s walk through this example of an interactive card.
Interactive card.
Interactive card.
Interactive card.
Adding 2D element.
Adding 2D element.
Adding 2D element.
First, let's start by setting up the base structure of our interactive card.
Open Framer and create a new Frame for the card. Set the width and height to your preferred dimensions (e.g., 300x400 pixels).
Add a background image or gradient to make the card visually appealing. Adjust the corner radius to give it a softer look if needed.
Customizing the 3D effect
Now, let's make the card respond to the user's cursor movement.
Select the card Frame and drop the 3D Look component. The card animation now follows the cursor.
To make the 3D effect feel natural, we need to ensure that cursor interactions work smoothly. You can enable or disable dragging. By default, this is disabled, so the element will just look at the cursor in 3D space
To refine the effect, instead of an abrupt shift, add a smooth transition so the card gradually tilts as the cursor moves over it.
Fine-tune the perspective value to control the depth of the 3D effect (e.g., 1000px for a more realistic look).
First, let's start by setting up the base structure of our interactive card.
Open Framer and create a new Frame for the card. Set the width and height to your preferred dimensions (e.g., 300x400 pixels).
Add a background image or gradient to make the card visually appealing. Adjust the corner radius to give it a softer look if needed.
Customizing the 3D effect
Now, let's make the card respond to the user's cursor movement.
Select the card Frame and drop the 3D Look component. The card animation now follows the cursor.
To make the 3D effect feel natural, we need to ensure that cursor interactions work smoothly. You can enable or disable dragging. By default, this is disabled, so the element will just look at the cursor in 3D space
To refine the effect, instead of an abrupt shift, add a smooth transition so the card gradually tilts as the cursor moves over it.
Fine-tune the perspective value to control the depth of the 3D effect (e.g., 1000px for a more realistic look).
First, let's start by setting up the base structure of our interactive card.
Open Framer and create a new Frame for the card. Set the width and height to your preferred dimensions (e.g., 300x400 pixels).
Add a background image or gradient to make the card visually appealing. Adjust the corner radius to give it a softer look if needed.
Customizing the 3D effect
Now, let's make the card respond to the user's cursor movement.
Select the card Frame and drop the 3D Look component. The card animation now follows the cursor.
To make the 3D effect feel natural, we need to ensure that cursor interactions work smoothly. You can enable or disable dragging. By default, this is disabled, so the element will just look at the cursor in 3D space
To refine the effect, instead of an abrupt shift, add a smooth transition so the card gradually tilts as the cursor moves over it.
Fine-tune the perspective value to control the depth of the 3D effect (e.g., 1000px for a more realistic look).
Setting perspective value.
Setting perspective value.
Setting perspective value.
3D carousel with a rotation limit.
3D carousel with a rotation limit.
3D carousel with a rotation limit.
First make multiple arms, each with an image layer, and rotate them in 3D along the Y axis to form a circle of images. (check this out to make your life easier 3D transforms in Framer)
Once the images are arranged in a circle, I connect this frame to the 3D look component. And now a very useful property is the rotation limit.
Let's say you want to create a 3D carousel that can only be rotated to the left and right, and the rotation along the X axis is completely disabled by setting the limit to 0.
Here you’ll want to enable dragging for the carousel effect.
When connecting a component, we need to add an additional code override to the component's primary variant to ensure the 3D look works.
Framer doesn't natively allow adding transform properties to primary variants in components, that’s why we need this override. Grab it below.
First make multiple arms, each with an image layer, and rotate them in 3D along the Y axis to form a circle of images. (check this out to make your life easier 3D transforms in Framer)
Once the images are arranged in a circle, I connect this frame to the 3D look component. And now a very useful property is the rotation limit.
Let's say you want to create a 3D carousel that can only be rotated to the left and right, and the rotation along the X axis is completely disabled by setting the limit to 0.
Here you’ll want to enable dragging for the carousel effect.
When connecting a component, we need to add an additional code override to the component's primary variant to ensure the 3D look works.
Framer doesn't natively allow adding transform properties to primary variants in components, that’s why we need this override. Grab it below.
First make multiple arms, each with an image layer, and rotate them in 3D along the Y axis to form a circle of images. (check this out to make your life easier 3D transforms in Framer)
Once the images are arranged in a circle, I connect this frame to the 3D look component. And now a very useful property is the rotation limit.
Let's say you want to create a 3D carousel that can only be rotated to the left and right, and the rotation along the X axis is completely disabled by setting the limit to 0.
Here you’ll want to enable dragging for the carousel effect.
When connecting a component, we need to add an additional code override to the component's primary variant to ensure the 3D look works.
Framer doesn't natively allow adding transform properties to primary variants in components, that’s why we need this override. Grab it below.
import { useState, useEffect, ComponentType } from "react" export function withPreserve3d(Component): ComponentType { return (props) => { return ( <Component {...props} style={{ transformStyle: "preserve-3d" }} /> ) } }
import { useState, useEffect, ComponentType } from "react" export function withPreserve3d(Component): ComponentType { return (props) => { return ( <Component {...props} style={{ transformStyle: "preserve-3d" }} /> ) } }
import { useState, useEffect, ComponentType } from "react" export function withPreserve3d(Component): ComponentType { return (props) => { return ( <Component {...props} style={{ transformStyle: "preserve-3d" }} /> ) } }
Final touches
And that’s it! You’ve successfully transformed a simple 2D object into an interactive 3D element in Framer.
I go in depth on my interactive 3D lesson, check it out for more info.
Now go ahead and experiment with different elements to create an engaging experience for your users!
Final touches
And that’s it! You’ve successfully transformed a simple 2D object into an interactive 3D element in Framer.
I go in depth on my interactive 3D lesson, check it out for more info.
Now go ahead and experiment with different elements to create an engaging experience for your users!
Final touches
And that’s it! You’ve successfully transformed a simple 2D object into an interactive 3D element in Framer.
I go in depth on my interactive 3D lesson, check it out for more info.
Now go ahead and experiment with different elements to create an engaging experience for your users!
