Css过渡翻转不工作在IE/Firefox

Question

我有一个div，它应该在用户单击go时进行CSS翻转过渡。它在谷歌Chrome浏览器上运行完美，但在火狐浏览器上运行完美。IE是一个烂摊子。文字只是翻转。有没有人知道是什么原因导致这个问题，如果有办法解决它。

下面是代码的概要: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

在Firefox中，这看起来像是一个可能的错误，因为它开始工作，例如在.front元素上应用零度旋转。

.front {
    transform: rotateY(0);
}

你还可以看到，当将背景色应用于.front元素(即转换后的元素的直接后代)而不是.backdrop元素时，背景消失了。

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

Internet Explorer

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

• 为什么当透视应用于父元素时，背景可见性隐藏在IE10中不工作?

• 如何通过转换子元素来重新创建透视原点效果?

注意

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