我有两个DIV重叠在一起,可以实现卡片翻转效果。请参见jsFiddle。DIV上面有一个Flip按钮,点击后会向容器添加“flipped”类来显示背面幻灯片。
问题在于:当背面幻灯片进入视图时,
我在研究这个问题时找到了这个stackoverflow问题,但是添加
以下是HTML标记:
-webkit-transform: rotateY(180deg)
值似乎覆盖了“Flip”按钮的z-index值,使得任何位于堆叠DIV上方的元素都被放到了背面。我在研究这个问题时找到了这个stackoverflow问题,但是添加
-webkit-transform: translate3d(0px, 0px, 0px)
并没有解决我的问题。以下是HTML标记:
<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>
您可以在jsFiddle中查看CSS/JS代码。