CSS：rotateY(180deg) z-index 未按预期工作后

Question

此处的示例代码：

http://jsfiddle.net/gat5S/1/

我想创建一个可以通过 CSS rotateY 翻转的“卡片”。轮换基于David Walsh's CSS Flip Animation，原则上效果很好。

但是，在我的示例中，我在卡片的每一面都有一个 :after 伪元素，用于创建类似纸的阴影效果。这个伪元素通过否定的z-index:-1; 放在卡片后面。这适用于“前”卡，但不适用于旋转后，也不适用于“后”卡。

jsFiddle 示例代码显示了我的问题（目前仅包含 webkit 前缀）。在初始状态下，一切看起来都符合预期。 :after 伪元素“INVISIBLE”只是部分可见。当您通过切换按钮翻转卡片时，会发生两件事：

1. 前面的卡片:after 元素变得可见。这不是故意的。
2. 背面卡片:after 元素可见，但在z-index:-1; 应使其不可见的框中也可见。也不是有意的。

我设法解决了 1. 通过使用 JavaScript 向 .front 添加一个类，这会改变 :after 的可见性。但是，我无法解决 2。我尝试了不同的 z-index 值，但这些似乎根本没有任何效果。

我想知道是否有解决这两个问题的聪明方法。任何帮助表示赞赏！

Answer 1

我已经搞定了

demo

CSS

.front, .back {
  text-align: center;
  background-color: #FFF9EC;
}

.front:after {
  content: ' INVISIBLE ';
  position: absolute;
  width: 40%;
  height: 10px;
  left: 70px;
  bottom: 12px;
  z-index: -1;
  -webkit-transform: translateZ(-1px);
  -webkit-backface-visibility: hidden;
}

.back:after {
  content: ' INVISIBLE ';
  position: absolute;
  width: 40%;
  height: 10px;
  left: 70px;
  bottom: 12px;
  z-index: -1;
  -webkit-transform: translateZ(-1px);
  -webkit-backface-visibility: hidden;
}

.flip-container {
  -webkit-perspective: 1000;
}
    
/* flip the pane when hovered */
.flip-container.flip .flipper {
  -webkit-transform: rotateY(180deg);
}

.flip-container, .front, .back {
    width: 100px;
    height: 100px;
}

/* flip speed goes here */
.flipper {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;
   position: relative;
    left: 30px;
}

/* hide back of pane during swap */
.front, .back {
  -webkit-backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.back h1 {
  -webkit-backface-visibility: hidden;

}

/* back, initially hidden pane */
.back {
  -webkit-transform: rotateY(180deg) translateZ(1px);
      -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
}

主要是我把z-index改成了translateZ；这就是你应该在 3D 中工作的方式。 背面可见性也存在一些问题：隐藏不传播到子元素。