Question

我有一个div，假设当用户点击go时进行CSS翻转过渡。它在Google Chrome中完美运行，但Firefox＆amp; 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渲染上下文Hocus Pocus对我来说就像一本封闭的书。

Internet Explorer

和Internet Explorer一样，IE不支持preserve-3d，如果你想在那里工作，那么你必须转换单个.front和.back元素，I已经有了很多乐趣：

注意

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

Css Transition翻转无法在IE / Firefox中运行

1 个答案:

Fierefox

Internet Explorer

注意