hover-3d questions

[jycouet]

Hello everyone 👋

I added hover-3d in my project and I have 2 questions:

• Does it have "performance" implication for users? Like on old phone or something?
• Should we have a mandatory space around cards? I have an horizontal scrollbar coming when I add this hover-3d

Thx

[pdanpdan]

Can you please share play that shows the scroll problem?

[jycouet]

Yes, I'll try a repro 👍

[jycouet]

https://github.com/jycouet/daisy-3d

[pdanpdan]

https://play.tailwindcss.com/F93VtZ8qh7

I put the comments in html, but it is the same saadeghi said

the scaling is 120% (so +10% on all sides)

[saadeghi]

• Does it have "performance" implication for users? Like on old phone or something?

It uses box shadow, blur, CSS transform and Might be slow on old/slow clients. But still faster than JS solutions, because it doesn't calculate or move things pixel by pixel. Instead, it applies the style only when each of 8 zones are hovered so in total, it's less calculations for the browser comparing to JS solutions.

• Should we have a mandatory space around cards? I have an horizontal scrollbar coming when I add this hover-3d

depends on your layout, but as you can see, the card gets slightly bigger on hover so if it's coving the whole width, you may want to add margins.