CSS not rendering backface the first time around on 3D transform

问题

I have a card flip style animation that flips a textarea 180 degrees.

The only issue I'm having is that the first time the flip is executed, just after passing 90 degrees, the element disappears, then the element behind appears on the completion of the 180 degree rotation.

Here's the example with the code:

http://jsfiddle.net/elninja/yhprm6nj/

CSS

.flip {
  -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  -webkit-perspective: 800;
   height: 100px;
    width: 250px;
   -webkit-transform: rotatex(-360deg);
}
.flip .card.flipped {
  -webkit-transform: rotatey(-180deg);
}
.flip .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 2s;
}
.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden ;
  z-index: 2;
}
.flip .card .front {
  position: absolute;
  z-index: 1;
}
.flip .card .back {
  -webkit-transform: rotatey(-180deg);
}

HTML

<div class="flip">
  <div class="card">
    <textarea id="txt_input" rows="4" class="face front" placeholder="Paste your text here."></textarea>
    <textarea id="txt_output" rows="4" class="face back" placeholder="Just a sec.."></textarea>
  </div>
</div>

回答1:

Just fixed it, I simply attached a quick (almost unnoticeable) animation to flip and render the backside of the textarea.

The trick lies in the CSS

@-webkit-keyframes flashflip {
  0% {
      opacity:0;
      -webkit-transform: rotatey(-180deg);
    }
  100% {
      opacity:1;
      -webkit-transform: rotatey(+180deg); 
    }
}

Which is called on page load by:

.flip .card { 
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 2s;
  -webkit-animation: flashflip 0.01s;
}

I discovered that if the animation goes on to a chrome extension, 0.01s is not enough, but 0.05 is.

This is the fixed version of the flip, works on chrome and firefox: http://jsfiddle.net/elninja/yhprm6nj/2/

来源：https://stackoverflow.com/questions/25172954/css-not-rendering-backface-the-first-time-around-on-3d-transform

标签

css

css-transforms