CSS backface-visibility 未显示在父 div 的 cardflip 上

Question

我正在尝试使用类似于卡片翻转动画的 CSS 过渡制作翻书动画，只是后面有另一张卡片。

当我创建单张卡片翻转时，它在 chrome 中运行良好。但是，如果我将它放在父 div 中以便在它后面放置另一张卡片，则卡片背面将不再显示。

HTML

<div class="scene">
    <div class="turncard">
        <div class="turncard-front">
            <div class="turncard-outside turncard-side">
              Front!!!<br/>I don't work
            </div>
            <div class="turncard-inside turncard-side">
              Back!!!<br/>Can you see me?
            </div>
        </div>
    </div>
</div>

CSS

.scene {
  margin-left: 200px;
  perspective: 6000px;
}
.turncard {
  width: 200px;
  height: 200px;
  margin-top: 50px;
  transform-style: preserve-3d;
}
.turncard-front {
  height: inherit;
  width: inherit;
  transition: transform 0.6s;
  transform-origin: top left;
}
.turncard-side {
  height: inherit;
  width: inherit;
  position: absolute;
  backface-visibility: hidden;
  background-color: green;
  text-align: center;
}
.turncard-outside{
  z-index: 1;
}
.turncard-inside {
  transform: rotateY(180deg);
  z-index: -1;
}
.turncard-front:hover {
  transform: rotateY(180deg);
}

工作版本(没有父 div)和非工作示例(有 div)都显示在这个 fiddle 中:http://jsfiddle.net/bxLa4kwu/1/

Answer 1

将此属性粘贴到 .turncard2-front 上:

transform-style: preserve-3d;

http://jsfiddle.net/bxLa4kwu/3/

此属性告诉它在 turncard2-front 进行 css 转换时保留 turncard2-front 元素的子元素的 3D 位置(例如，页面的内部和外部)。

请注意，这在 IE11 中不起作用，因为该属性不受支持(但您可能知道第一个示例在 IE 中也不起作用)。