image flip and change to another image error on IE

I have used this code to flip an image and show another image on button click. IT works on all browsers but does not work on IE. when the image flips on IE, it reverses the same image instead of showing the image on another div.

<script src="http://ift.tt/1ROJ5xx"></script>
<script>
//try this http://ift.tt/1xDBkkf
//http://ift.tt/1L9YUMM see this link for IE support
// i have used this example http://ift.tt/1T6n4KQ
function flip() {
    $('.card').toggleClass('flipped');
}

function switchVisible() {
            if (document.getElementById('mapButtons')) {

                if (document.getElementById('mapButtons').style.display == 'none') {
                    document.getElementById('mapButtons').style.display = 'block';
                    document.getElementById('modelButtons').style.display = 'none';
                                        
                }
                else {
                    document.getElementById('mapButtons').style.display = 'none';
                    document.getElementById('modelButtons').style.display = 'block';
                                        
                }
            }
}


</script>

#modelButtons {
  display: none;
}

.prevButton img {

opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.prevButton:hover img {
opacity: .5;
}

.nextButton img {

opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.nextButton:hover img {
opacity: .3;
}

.changeButton img {

opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.changeButton:hover img {
opacity: .5;
}

.container {
width: 453;
    height: 453;
 position: relative;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
        
    perspective: 800px;
}
.card {
     width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 5s;
    -moz-transition: -moz-transform 5s;
-ms-transition: all .4s ease-in-out;
    -o-transition: -o-transform 5s;
        
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;

    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
}
.card div {
   
    display: block;
    height: 100%;
    width: 100%;
    line-height: 260px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 140px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}
.card .front {

}
.card .back {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    -ms-transform: rotateX(0deg) rotateY(180deg);
    transform: rotateY( 180deg );
        
}
.card.flipped {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
        -ms-transform: rotateX(0deg) rotateY(180deg);
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}

<section class="container">
<div class="card">
<div class = "front">
<img id="image" src="http://ift.tt/1LSVvgm" width="453" height="453" usemap="#map" />

</div>


<div class="back">
<img id="image1" src="http://ift.tt/1T6n4KS" width="453" height="453" usemap="#map2" />


</div>
</div>
</section>

<div id = "mapButtons" >
<button class = "prevButton" type="button" onclick="change_BASE_ID(curr_base_id,this.className)"><img id="image" src="prevButton.png"></button>
<button class = "changeButton" type="button" onclick= "flip(); switchVisible();"><img id="image" src="http://ift.tt/1LSVvgq"></button>
<button class = "nextButton" type="button" onclick="change_BASE_ID(curr_base_id,this.className)"><img id="image" src="http://ift.tt/1T6n65u"></button>
</div> 

  <div id = "modelButtons" >
<button class = "prevButton" type="button" onclick="change_BASE_ID1(curr_base_id1,this.className)"><img id="image" src="prevButton.png"></button>
<button class = "changeButton" type="button" onclick= "flip(); switchVisible();"><img id="image" src="http://ift.tt/1LSVvgs"></button>
<button class = "nextButton" type="button" onclick="change_BASE_ID1(curr_base_id1,this.className)"><img id="image" src="http://ift.tt/1T6n65u"></button>
</div>