Found a way to do stacked card hover effects with just 3 lines of CSS

I was trying to make those layered card looks where each card lifts up on hover. Usually I'd reach for z-index and transform chains. But I found out if you use transform-style: preserve-3d and translateZ with different values, you get the same stacking effect without any JS. Took me like 45 minutes of fiddling in CodePen to get the math right. Has anyone else tried this approach or do you stick with the old way?

2 comments

2 Comments

miles_roberts223d ago

Man that 45 minutes of fiddling feels familiar. Spent a whole evening once trying to get a layered card thing to look right and kept getting weird clipping issues. The transform-style preserve-3d trick is a lifesaver though. Once you figure out the translateZ values it feels like cheating. Way cleaner than stacking z-indexes and hoping they don't break on the next browser update.

jake_mason303d ago

Whoa yeah, the z-index guessing game is the worst. But here's something nobody talks about: the real enemy isn't even the clipping or the translateZ stuff. It's the parent element's overflow property. I've lost count of how many times I set all my 3D transforms perfectly, only to realize some outer container had overflow hidden and just cropped everything without a warning. Firefox's 3D view in dev tools helps see it, but Chrome hides that stuff way better so you don't notice until you resize the browser. What container pitfalls have you guys run into that wasted hours?