2D & 3D Perspective with Z-index stacking (bug or just a tip?)

Hi guys,

Today I had a problem that took me hours, searching for a solution and trying by myself to solve it.

MY DESIGN
A stack of cards that while as you scrolling, the cards change position in the stack.

MY PROBLEM
Even changing the z-index of my cards, they didn’t change the positions. I used z-index moving, z-index perspective, and nothing.

My structure was:
image

.perspective-wrapper
image

.card1
image

.card2
image

And didn’t change position! (card2 was in front always)

THE SOLUTION
In the perspective-wrapper on 2D & 3D Perspective, set the z-index moving to any value, or rotate 1 px.

Done!

.

Why does this happen? I don’t know. Is it a bug? I don’t know.

I just hope this post can help any lost soul like me.

Thanks