3D Hover Reveal Component

Copy component

3D Hover Reveal Component

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

3D Hover Reveal Component

This is a sleek 3D hover reveal component crafted in Framer, inspired by the cool interactions on therawmaterials.com. It's a rectangular frame that transforms into a 3D cube when hovered, rotating to showcase an image. Perfect for adding a touch of interactivity to your portfolio or project showcase.

image of Nandi Muzsik

Created by

3D Hover Reveal Component
3D Hover Reveal Component
3D Hover Reveal Component
Framer 3D Transforms for Beginners (Crash Course)

Related Lesson

Framer 3D Transforms for Beginners (Crash Course)

Framer 3D Transforms for Beginners (Crash Course)

Related Lesson

Framer 3D Transforms for Beginners (Crash Course)

Framer 3D Transforms for Beginners (Crash Course)

Related Lesson

Framer 3D Transforms for Beginners (Crash Course)

About the resource

When creating an interaction like this in Framer, we have to tap into its amazing capability of transforming and projecting layers in 3D space.

We can simply create a frame where we showcase the project details, and then add an absolutely positioned frame within that. This frame will contain the project image. We'll transition this absolutely positioned frame in a way that gives us something like a cuboid object, so when we rotate the whole thing, the top part peeks out and we see the project image.

About the resource

When creating an interaction like this in Framer, we have to tap into its amazing capability of transforming and projecting layers in 3D space.

We can simply create a frame where we showcase the project details, and then add an absolutely positioned frame within that. This frame will contain the project image. We'll transition this absolutely positioned frame in a way that gives us something like a cuboid object, so when we rotate the whole thing, the top part peeks out and we see the project image.

About the resource

When creating an interaction like this in Framer, we have to tap into its amazing capability of transforming and projecting layers in 3D space.

We can simply create a frame where we showcase the project details, and then add an absolutely positioned frame within that. This frame will contain the project image. We'll transition this absolutely positioned frame in a way that gives us something like a cuboid object, so when we rotate the whole thing, the top part peeks out and we see the project image.

Transforming the absolutely positoned frame in 3D space.

Transforming the absolutely positoned frame in 3D space.

Transforming the absolutely positoned frame in 3D space.

As you can see in the video above, I'm using all sorts of transform properties in Framer, such as:

  • Rotate

  • Perspective

  • Origin

  • Preserve 3D

If you want to take a deeper look into these and see how you can also use them to bring your ideas to life, make sure to watch my 30-minute free crash course on Framer 3D transforms.

Okay, so once we have this setup, all we need to do is:

  1. Turn this whole thing into a component

  2. Create a phone-optimized variant

  3. Make a hover variant where we rotate the whole object to peek at the project image

As you can see in the video above, I'm using all sorts of transform properties in Framer, such as:

  • Rotate

  • Perspective

  • Origin

  • Preserve 3D

If you want to take a deeper look into these and see how you can also use them to bring your ideas to life, make sure to watch my 30-minute free crash course on Framer 3D transforms.

Okay, so once we have this setup, all we need to do is:

  1. Turn this whole thing into a component

  2. Create a phone-optimized variant

  3. Make a hover variant where we rotate the whole object to peek at the project image

As you can see in the video above, I'm using all sorts of transform properties in Framer, such as:

  • Rotate

  • Perspective

  • Origin

  • Preserve 3D

If you want to take a deeper look into these and see how you can also use them to bring your ideas to life, make sure to watch my 30-minute free crash course on Framer 3D transforms.

Okay, so once we have this setup, all we need to do is:

  1. Turn this whole thing into a component

  2. Create a phone-optimized variant

  3. Make a hover variant where we rotate the whole object to peek at the project image

the project brick component and its variants

The component and its variants.

the project brick component and its variants

The component and its variants.

the project brick component and its variants

The component and its variants.

The last step is to make this interactive. We can connect an interaction from the Default variant to the Hover variant with a mouse enter trigger, and then we can connect another interaction from the Hover variant back to the Default variant with a mouse leave trigger.

Of course, you can experiment with different interaction triggers to create all sorts of fun results.

The last step is to make this interactive. We can connect an interaction from the Default variant to the Hover variant with a mouse enter trigger, and then we can connect another interaction from the Hover variant back to the Default variant with a mouse leave trigger.

Of course, you can experiment with different interaction triggers to create all sorts of fun results.

The last step is to make this interactive. We can connect an interaction from the Default variant to the Hover variant with a mouse enter trigger, and then we can connect another interaction from the Hover variant back to the Default variant with a mouse leave trigger.

Of course, you can experiment with different interaction triggers to create all sorts of fun results.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Dark mode UI of Framer Uni feedback form with user avatar, input fields for name and email, and 'Send a message' button, showcasing sleek interface design

    New

    Native Feedback Widget in Framer

    Component

    Dark mode UI of Framer Uni feedback form with user avatar, input fields for name and email, and 'Send a message' button, showcasing sleek interface design

    New

    Native Feedback Widget in Framer

    Component

    Dark mode UI of Framer Uni feedback form with user avatar, input fields for name and email, and 'Send a message' button, showcasing sleek interface design

    New

    Native Feedback Widget in Framer

    Component

  • Futuristic dark interface displaying 'Your Secure' followed by a encrypted version fo the text, with a glowing central light effect

    Encryption Hero Animation in Framer

    Component

    Futuristic dark interface displaying 'Your Secure' followed by a encrypted version fo the text, with a glowing central light effect

    Encryption Hero Animation in Framer

    Component

    Futuristic dark interface displaying 'Your Secure' followed by a encrypted version fo the text, with a glowing central light effect

    Encryption Hero Animation in Framer

    Component