Question

此处的示例代码：

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

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

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

jsFiddle示例代码显示了我的问题（目前只包含webkit前缀）。在初始状态下，everthing看起来像预期的那样。 {“1}}伪元素说”INVISIBLE“只是部分可见。当您通过切换按钮翻转卡时，会发生两件事：

前卡:after元素变为可见。这不是故意的。
后面的卡:after元素是可见的，但也在:after应该使其不可见的框中。也不是故意的。

我设法解决1.使用JavaScript将类添加到z-index:-1;，这会更改.front的可见性。但是，我无法解决2.我尝试了不同的:after值，但这些似乎没有任何影响。

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

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中工作的方式。背面可见性也存在一些问题：隐藏不会传播到子元素。

CSS：在rotateY（180deg）之后，z-index无法按预期工作

1 个答案:

demo