â–Ľ
Streaming live at 10am (PST)

How to implement a book cover effect in webflow like this..?

Hi,

I want to make this effect in a book cover, is that possible?
thanks

Hey, Zozo!

I attempted to upload a short .gif of me making the changes, but I’m having internet issues on my end. Here’s the solution I found most useful!

Select the individual element. Scroll down to Transitions and Transforms settings.
Click on the gear before adding a transform. On the grid, select the far left dot, moving the perspective from the exact middle to left-justified middle. (or 0%, 50%).

Now simply add a Rotation Transform to that item along its Y-axis. Since you’ve changed the perspective origin, the item will rotate starting from the left edge versus the middle.

Hope this solution helps!

1 Like

Did it works as the gif above?
It didn’t worked for me :frowning:
thank you

Opps! I just realized I skipped a step.

That change will rotate it in the direction you want to go, but it doesn’t activate on hover like you want. Have you ever added transitions to hover states before?

yes, i did…

Almost there!

In the null-state, add this transition.

Also, I made the rotation less drastic, I would suggest moving it down to ~15 degrees for a more subtle transition.

much better but still not the same,I don’t know whats wrong.

If you’re trying to 100% replicate this site, you’ll need to have another image below each cover when the book 'open’s. Here’s a little idea I implemented…

I added the drop shadow in the Hover state, then added the transition to the null state.

Other than this, I’m not sure how else to completely mirror that site!

1 Like

Thank you very much it helped me alot

Glad I could help :slight_smile:

1 Like

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.