CSS: After rotateY(180deg) z-index not working as intended

问题

Example code here:

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

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.

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.

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:

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

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!

回答1:

I've got it working

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;
}

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.

来源：https://stackoverflow.com/questions/18925174/css-after-rotatey180deg-z-index-not-working-as-intended

标签

html

css

css-transforms