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

火狐

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

.front {
    transform: rotateY(0);
}

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

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

Internet Explorer

还有 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！