Flip effect in Internet Explorer

Question

I have a code to make flip to a div. It's working fine in Firefox and Chrome, but in IE when the card flips, it shows the front side upside down instead of show the back side.

This is the code:

body {
  background: #eee;
}

.card{
  width: 300px;
  height: 300px;
}

.content {
  width: 300px;
  height: 300px;
  perspective: 500px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card:hover .content {
  transform: rotateX( 180deg ) ;
  transition: transform 0.5s;
}

.front,
.back {
  position: absolute;
  height: 100%;
  width: 100%;
  background: white;
  line-height: 300px;
  color: #03446A;
  text-align: center;
  font-size: 60px;
  border-radius: 5px;
  backface-visibility: hidden;
  }

.back {
  background: #03446A;
  color: white;
  transform: rotateX( 180deg );
}

<div class="card">
   <div class="content">
     <div class="front">
        Front
     </div>
     <div class="back">
        Back!
     </div>
  </div>
</div>

Answer 1

As Shaggy commented, IE doesn't support preserve-3d. It also lacks support for backface-visibility: hidden;

So,you can not rotate the container, you have to rotate the elements individually.

And you need to adjust the visibility (with half the transition time, you want it to happen in the middle of the rotation.

This is the result, working ok on modern browsers and also on IE

body {
  background: #eee;
}

.card{
  width: 300px;
  height: 300px;
}

.content {
  width: 300px;
  height: 300px;
  perspective: 500px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card:hover .content {
}

.front,
.back {
  position: absolute;
  height: 100%;
  width: 100%;
  background: white;
  line-height: 300px;
  color: #03446A;
  text-align: center;
  font-size: 60px;
  border-radius: 5px;
  backface-visibility: hidden;
  }


.front {
  transition: visibility 0.5s, transform 1s;
}

.card:hover .front {
  visibility: hidden;
  transform: rotateX(180deg);
}

.back {
  background: #03446A;
  color: white;
  transform: rotateX( -180deg );
  transition: visibility 0.5s, transform 1s;
}

.card:hover .back {
  transform: rotateX(0deg);
  
}

<div class="card">
   <div class="content">
     <div class="front">
        Front
     </div>
     <div class="back">
        Back!
     </div>
  </div>
</div>