html - Css Transition flip 在 IE/Firefox 中不起作用

Question

我有一个 div，它应该在用户单击“开始”时进行 CSS 翻转转换。它在 Google Chrome 中完美运行，但 Firefox & IE 是一团糟。文本只是翻转。有谁知道导致此问题的原因以及是否有解决方法。

这是代码的jsfiddle: http://jsfiddle.net/kq45xhyv/

如果您需要更多信息来帮助解决此问题，请随时问我任何问题或告诉我。

.flip-container {
    -webkit-perspective: 1000;
    perspective: 1000; 
    padding:30px;
}


.flip-container.flip .flipper {
   -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
   width: 100%;
   height: 100%; 
}

.flipper {
   -webkit-transition: 0.6s;
   -o-transition: 0.6s;
   transition: 0.6s;
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
   position: relative; 
}

.front, .back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0; }


  .front {
    z-index: 2; }

    .back {
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg); }

      .backdrop{
        background-color: #edeff1;
        padding: 24px 23px 20px;
        border-radius: 6px;
      }

这是html

<div class='flip-container' id='myCard'>
    <div class="flipper">
        <div class="front">
                <div class="backdrop">      
                    <p>To start enter a URL below </p>
                    <div class="form-group">
                        <input type='text' class='form-control' id='url'/>
                    </div>
                    <button class='btn btn-primary btn-lg btn-block'>GO</button>
                </div>
        </div>
        <div class="back">
            <div class="backdrop">  
                <div class="extra">
                    <p class='cent' id='finalURL'></p>
                </div>
            </div>
        </div>
    </div>

Answer 1

火狐

在 Firefox 中，这对我来说似乎是一个可能的错误，因为它开始工作，例如在 .front 上应用零度旋转时元素。

.front {
    transform: rotateY(0);
}

您还可以看到，在将背景颜色应用于 .front 时，背景会按预期消失。元素(即转换元素的直接后代)而不是 .backdrop元素。

我有一种感觉 preserve-3d没有得到适当的尊重，但我只是在这里猜测，所有这些 3D 渲染上下文 Hocus Pocus 对我来说就像一本合上的书。

互联网浏览器

还有 Internet Explorer，IE 不支持 preserve-3d ，如果你想让它在那里工作，那么你必须转换单个 .front和 .back元素，我已经从中获得了很多乐趣:

• Why is backface-visibility hidden not working in IE10 when perspective is applied to parent elements?

• How to recreate perspective-origin effect by transforming child elements?

注意事项

除此之外，您的 perspective值应该有一个单位，即px !