3

这里的示例代码：

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

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

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

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

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

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

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

4

1 回答 1

3

我有它的工作

演示

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

于 2013-09-21T10:31:07.073 回答