CSS不会在3D变换上第一次渲染背面 [英] CSS not rendering backface the first time around on 3D transform

问题描述

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

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

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

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>

推荐答案

只是解决了这个问题，我只是简单地附加了一个（几乎

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

诀窍在于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是。

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

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

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

这篇关于CSS不会在3D变换上第一次渲染背面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！