About The Resource
This 3D interaction can be created in Framer, thanks to the amazing 3D transforms feature.
You can simply create two frames on the canvas, one for the back of the book and one for the front. Then apply a 3D rotation to the front side so it looks slightly opened.
After wrapping the front and back sides of the book in a common frame, we can turn it into a component and create a new variant where we change the rotation degree so the book opens up more.
In the end, all we have to do is connect the two variants with mouse enter and mouse leave interactions.
Step / 01
Remix the project.
Step / 02
See how it's built.
Step / 03
Try recreating it for practice, or copy and paste it to your project.
