Streaming live at 10am (PST)

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


#1

Hi,

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


#2

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!


#3

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


#4

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?


#5

yes, i did…


#6

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.


#7

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


#8

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!


#9

Thank you very much it helped me alot


#10

Glad I could help :slight_smile:


#11

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