Question

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

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

以下是代码示例：

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>

Answer 1

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

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

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

1 个答案: