Css Transition flip not working in IE/Firefox

Question

I have a div that is suppose to make a CSS flip transition when the user clicks go. It works perfectly in Google Chrome but Firefox & IE is a mess. The text just flips. Does anybody know whats causing this issue and if there is a way to resolve it.

Here is a jsfiddle of the code: http://jsfiddle.net/kq45xhyv/

Please feel free to ask me any questions or let me know if you need any more information to help resolve this issue.

.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;
      }

and here's the 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

In Firefox this looks like a possible bug to me, as it starts working when for example applying a zero degree rotation on the .front element.

.front {
    transform: rotateY(0);
}

Also you can see that the background disappears as expected when applying the background color to the .front element (ie the direct descendant of the transformed element) instead of the .backdrop element.

I have a feeling that preserve-3d is not being respected properly, but I'm just guessing here, all this 3D Rendering Context Hocus Pocus is like a closed book to me.

Internet Explorer

And Internet Explorer, well IE doesn't support preserve-3d , if you want it to work there, then you'll have to transform the single .front and .back elements, I already had lots of fun with that:

• 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?

Note

Besides all that, your perspective value should have a unit, ie px !