CSS转换翻转在IE / Firefox中不起作用

Question

我有一个div，它可以在用户单击go时进行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

Fierefox

在Firefox中，这对我来说似乎是个可能的错误，例如，当对.front元素进行零度旋转时，它便开始起作用。

.front {
    transform: rotateY(0);
}

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

我有一种感觉， preserve-3d未受到应有的尊重，但我只是猜测这里，这一切的3D绘图上下文戏法就像是一个封闭的书给我。

IE浏览器

和Internet Explorer一样，IE还不支持.front preserve-3d ，如果您希望它在那工作，那么您就必须转换单个.front和.back元素， .back我已经很有趣了：

• 将透视图应用于父元素时，为什么隐藏背面可见性在IE10中不起作用？

• 如何通过转换子元素来重新创建透视图效果？

注意

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