css - 变换使 3D 卡的背面不可点击

Question

我想像http://desandro.github.io/3dtransforms/examples/card-01.html那样翻转

但是每边都有按钮。所以这是我的html

<div class="flip-container">
    <div class="flip">
        <div class="side front">
            <p>front</p>
            <button class="front-flip-button">flip</button>
        </div>
        <div class="side back">
            <p>back</p>
            <button class="back-flip-button">flip</button>
        </div>
    </div>
</div>

和css

.flip-container{
    position: relative;
    -webkit-perspective: 800;
    width: 500px;
    height: 300px;
}
.flip{
    position: absolute;
    width: inherit;
    height: inherit;
    -webkit-transform-style: preserve-3d;
    -webkit-transition-duration: 500ms;
    -webkit-transform: translate3d(0, 0, 0);
    border: 1px solid;
}
.side{
    position: absolute;
    width: inherit;
    height: inherit;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}
.flip.flipped,
.back{
    -webkit-transform: rotate3d(0, 1, 0, 180deg);
}
.back-flip-button,
.front-flip-button{
    position: absolute;
    left: 0;
    top: 0;
}
p{
    font-size: 90px;
    text-align: center;
}

一切都很好，但是当我将某些元素与 translateZ 一起使用时，它会使后退按钮无法点击。

<div class="flip-container">
    <div class="flip">
        <div class="side front">
            <p>front</p>
            <button class="front-flip-button">flip</button>
        </div>
        <div class="side back">
            <p>back</p>
            <button class="back-flip-button">flip</button>
        </div>
    </div>
</div>

<div class="some"></div>

为什么会这样？

http://jsfiddle.net/j5Sm4/

Answer 1

应用这个

.back-flip-button {
    ... Your other styles ...
    -webkit-transform:translateZ(1px);
    -webkit-backface-visibility:hidden;
    /* Needs other prefixes to be cross browser */
}

Demo

这是因为父元素有自己的堆叠顺序。要平衡堆叠顺序并因此将按钮放在顶部，您必须为其指定一个堆叠顺序，我使用 translateZ 进行了此操作。 backface-visibility:hidden 使按钮不显示在正面

将来我们可能可以通过将 will-change 属性应用到背面来做到这一点