Why is webkit transform overriding the z-index values of an element?

Question

So I have two divs stacked on top of one another that does a card flip effect. See jsFiddle. There is a Flip button on top of the DIVs that on click adds a "flipped" class to the container that flips the Back Slide into view.

Here's the problem: when the back slide comes into view, the -webkit-transform: rotateY(180deg) values seem to override the z-index values of the "Flip" button so that anything on top of the stacked DIVs goes in the back.

I found this stackoverflow question while researching this issue but adding -webkit-transform: translate3d(0px, 0px, 0px) didn't do the trick for me.

Here is the HTML Markup:

<div class="carousel-slide current">
  <div class="flipper">
    <div class="fl front">
        <img src="http://placehold.it/411x274/ff9900/fff" />
    </div>
    <div class="fl back">
        <img src="http://placehold.it/411x274/59a5d1/fff" />
    </div>
  </div> 

  <a class="btn-flip" href="#">Flip</a>
</div>

You can view the CSS/JS in the jsFiddle.

score 3 · Accepted Answer · answered Mar 04 '14 at 06:47

The issue is that when you are working in 3D, most of the z dimensions have to be set in 3D. And the z-index becomes less and less relevant.

You can solve your problem bringing the button to front (in 3D)

.btn-flip {
    ....
    -webkit-transform: translateZ(1px);
}

fiddle

Why is webkit transform overriding the z-index values of an element?

1 Answers1