Question

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

当我创建单张卡片时，它可以正常工作。但如果我把它放在父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）都显示在这个小提琴中：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中不起作用）。

CSS背面 - 可见性未显示在父div中的cardflip上

HTML

CSS

1 个答案: