Kevin Powell - Community•12mo ago

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 transform: rotateX(10deg) translate3d(0, 0, 25px) scale(1.05); on my article:hover selector. 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

9 Replies

vince•12mo ago

Here is the default state:

vince•12mo ago

Here is the hover state:

vince•12mo ago

MarkBoots•12mo ago

try this

body {
  perspective: 1000px;
}

article {
  transform-style: preserve-3d;
  transform-origin: top;
}

article:hover {
  transform: translateZ(20px) rotateX(10deg);
}

body {
  perspective: 1000px;
}

article {
  transform-style: preserve-3d;
  transform-origin: top;
}

article:hover {
  transform: translateZ(20px) rotateX(10deg);
}

https://codepen.io/MarkBoots/pen/KKJrooJ?editors

vince•12mo ago

wowow nice! thank you! I'll have to look and see what you did. I left off with realizing that you can't transition a linear-gradient and was reading that you need a @property but never seen those before so lots of learning! thanks again 🙂

MarkBoots•12mo ago

i updated it. to transition the sheen. just increase the size of the element

vince•12mo ago

ohh I see, very nice. I need to learn linear-gradient syntax haha i always use the css generators for it but it's too much of a crutch I forked it if you wanna delete it, i know you like making space for ur codepen

MarkBoots•12mo ago

i deleted it, but for reference you might want to post it here

vince•12mo ago

Oh yes! Thanks again!! https://codepen.io/vince1444/pen/vYbQRPW

Gaming

Programming

How to pop out bottom left/right corners