CSS：rotateY（180deg）z-index无法正常工作后 [英] CSS: After rotateY(180deg) z-index not working as intended

问题描述

此处的示例代码：

http：// jsfiddle.net/gat5S/1/

我想创建一个可以通过CSS rotateY翻转的卡片 。旋转基于 David Walsh的CSS翻转动画，并且原则上效果很好。

I want to create a "card" that can be flipped via CSS rotateY. The rotation is based on David Walsh's CSS Flip Animation and in principle works well.

但是，在我的示例中，我用于创建纸样的卡片的每一面都有一个：after 伪元素阴影效果。该伪元素通过负 z-index：-1; 放在卡片的后面。

However, in my example, I have an :after pseudo-element for each side of the card that I use to create a paper-like shadow effect. This pseudo-element is put behind the card via negative z-index:-1;. This works for the "front" card but not after rotation and not for the "back" card.

jsFiddle示例代码显示了我的问题（当前仅包含webkit前缀），这适用于前卡，但不适用于旋转后的产品，不适用于后卡。 。在初始状态下，一切都按预期进行。 ：after 伪元素说不可见仅部分可见。当您通过切换按钮翻转卡片时，会发生两件事：

The jsFiddle example code shows my problem (currently only containing webkit prefixes). In the initial state everthing looks as intended. The :after pseudo-element saying "INVISIBLE" is only partly visible. When you flip the card via the toggle button two things happen:

1. 前面的卡片：之后元素变为可见。


2. 后卡：after 元素可见，但在 z -index：-1; 应该使其不可见。

1. The front card :after element becomes visible. This is not intended.
2. The back card :after element is visible but also in the box where z-index:-1; should make it invisible. Also not intended.

我设法通过使用JavaScript将类添加到 .front来解决了1。 ，它更改了：after 的可见性。但是，我无法解决2。我尝试了不同的 z-index 值，但这些值似乎根本没有任何作用。

I managed to solve 1. by using JavaScript to add a class to the .front which changes the visibility of :after. However, I cannot manage to solve 2. I tried different z-index values but these don't seem to have any effect at all.

我想知道是否有解决这两个问题的聪明方法。感谢所有帮助！

I wonder if there is a clever way to solve both problems. Any help appreciated!

推荐答案

我已经开始使用

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索引更改为translationZ；这就是您应该在3D模式下工作的方式。
背面的可见性也存在一些问题：隐藏不传播到子元素。

Mainly, I have changed the z-index to translateZ; that is the way you should work in 3D. There was also some issue with the backface visibility : hidden not propagating to the child elements.

这篇关于CSS：rotateY（180deg）z-index无法正常工作后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！