CSS 第一次在 3D 变换时不渲染背面

我有一个卡片翻转风格的动画，可以将文本区域翻转 180 度。

我遇到的唯一问题是，第一次执行翻转时，在经过 90 度后，元素消失，然后在完成 180 度旋转后出现后面的元素。

这是带有代码的示例：

http://jsfiddle.net/elninja/yhprm6nj/ 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>

只是修复了它，我只是附加了一个快速（几乎不易察觉）的动画来翻转和渲染文本区域的背面。

诀窍在于CSS

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

页面加载时调用它：

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

我发现如果动画继续到 chrome 扩展，0.01s 是不够的，但 0.05 就足够了。

这是翻转的固定版本，适用于 chrome 和 firefox：http://jsfiddle.net/elninja/yhprm6nj/2/ http://jsfiddle.net/elninja/yhprm6nj/2/