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.
Created by
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:
Turn this whole thing into a component
Create a phone-optimized variant
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:
Turn this whole thing into a component
Create a phone-optimized variant
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:
Turn this whole thing into a component
Create a phone-optimized variant
Make a hover variant where we rotate the whole object to peek at the project image
The component and its variants.
The 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.
