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>

Have you tried adding the other vendor prefixes (-moz- and -ms-) not just the -webkit- prefix? — , Aug 13 '14 at 21:49

score 1 · Accepted Answer · edited May 23 '17 at 12:20

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:

Note

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

Sorry for the late response, this was on the side burner. I submitted as the answer. Thank you! — user2901304, Dec 11 '14 at 23:40

Css Transition flip not working in IE/Firefox

1 Answers1

Fierefox

Internet Explorer

Note