Why does webkit conversion override element z-index values?

Question

So, I have two divs located one above the other, which makes the effect of discarding a map. See jsFiddle . At the top of the DIVs is the Flip button, which, when clicked, adds the "flipped" class to the container, which turns the Back Slide into view mode.

Here's the problem: when viewing the back slide, the values -webkit-transform: rotateY(180deg)appear to override the z-index values ​​of the “Flip” button, so everything on top of the stacked DIVs goes back.

I found https://stackoverflow.com/a/1674444/1674444 ... investigating this problem, but adding it -webkit-transform: translate3d(0px, 0px, 0px)didn't help 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>

CSS/JS jsFiddle.

Answer 1

, 3D, z 3D. z- .

, ( 3D)

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

fiddle