How to pop out bottom left/right corners
I'm trying to make the steam game card hover effect.
Here's my codepen: https://codepen.io/vince1444/pen/BaMGQWz
So far, I have
But this isn't really that close to how it looks in the steam app. It seems to be like in the steam app, it scales very slightly and the transform is anchored on the top, and then the card slightly "pops out" on the bottom corners. Hopefully that makes sense.
My version right now scales too much, and then juts out but doesn't really "pop".
I thought about clip-path, but I don't think that's the solution here.
There has to be a way to do this that I'm not familiar with. I looked at the different transform properties but I don't think any of them are really what I'm looking for
Here's my codepen: https://codepen.io/vince1444/pen/BaMGQWz
So far, I have
transform: rotateX(10deg) translate3d(0, 0, 25px) scale(1.05);article:hoverBut this isn't really that close to how it looks in the steam app. It seems to be like in the steam app, it scales very slightly and the transform is anchored on the top, and then the card slightly "pops out" on the bottom corners. Hopefully that makes sense.
My version right now scales too much, and then juts out but doesn't really "pop".
I thought about clip-path, but I don't think that's the solution here.
There has to be a way to do this that I'm not familiar with. I looked at the different transform properties but I don't think any of them are really what I'm looking for
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
