Internet Explorer CSS Transition issues, Flipping Boxes with CSS. Disable effect?

Question

I recreated the flipping boxes from this codepen in my page: http://codepen.io/syedrafeeq/pen/eCkFt?editors=010

<h1>CSS 3D FLIP BOX</h1>
<h3>Flipping content to a div (Transitions and 3D Transforms)</h3>

    <div class="hover panel">
      <div class="front">
        <div class="box1">
          <p>Front Side</p>
        </div>
      </div>
      <div class="back">
        <div class="box2">
          <p>Back Side</p>
        </div>
      </div>
    </div>

However, in IE 11 both the content from the back and front of the box are appearing at the same time.

How would you fix this? Maybe disabling the flipping functionality only for IE?

Thanks for any help!

Answer 1

I forked the above pen to add support for IE10+ - some of the CSS only included Webkit/Mozilla prefixed rules (perspective, transform, transform-style, backface-visibility) and I also removed the rotateX values from transform as it's not needed for this example.

http://codepen.io/clintioo/pen/zElFf

	$(document).ready(function(){
		// set up hover panels
		// although this can be done without JavaScript, we've attached these events
		// because it causes the hover to be triggered when the element is tapped on a touch device
		$('.hover').hover(function(){
			$(this).addClass('flip');
		},function(){
			$(this).removeClass('flip');
		});
	});

body {
	background-color: #ecf0f1;
	margin: 20px;
	font-family: Arial, Tahoma; 
	font-size: 20px; 
	color: #666666; 
	text-align: center;	
}
p { color: #ffffff;  }

/*-=-=-=-=-=-=-=-=-=-*/
/* Column Grids */
/*-=-=-=-=-=-=-=-=-= */

.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
	position: relative;
	display:inline;
	display: inline-block;
	float: left;
	margin-right: 2%;
	margin-bottom: 20px;
}
.end { margin-right: 0 !important; }

/*-=-=-=-=-=-=-=-=-=-=- */
/* Flip Panel */
/*-=-=-=-=-=-=-=-=-=-=- */

.wrapper{
  width: 980px;
  margin: 0 auto;
  background-color: #bdd3de;
  hoverflow: hidden;
}

.panel {
	margin: 0 auto;
	height: 130px;  
	position: relative;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
  perspective: 600px;
}

.panel .front,
.panel .back {
	text-align: center;
}
	
.panel .front {
	height: inherit;
	position: absolute;
	top: 0;
	z-index: 900;
	text-align: center;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.panel .back {
	height: inherit;
	position: absolute;
	top: 0;
	z-index: 1000;
	-webkit-transform: rotateY(-180deg);   
  -moz-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
	-webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}
.panel.flip .front {
	z-index: 900;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.panel.flip .back {
	z-index: 1000;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.box1{
	background-color: #14bcc8;
	width: 250px;
	height: 150px;
	margin: 0 auto;
	padding: 20px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
.box2{
	background-color: #ff7e70;
	width: 250px;
	height: 150px;
	margin: 0 auto;
	padding: 20px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>CSS 3D FLIP BOX</h1>
<h3>Flipping content to a div (Transitions and 3D Transforms)</h3>

<div class="wrapper">
      <div class="col_third">
        <div class="hover panel">
          <div class="front">
            <div class="box1">
              <p>Front Side</p>
            </div>
          </div>
          <div class="back">
            <div class="box2">
              <p>Back Side</p>
            </div>
          </div>
        </div>
		</div>

		<div class="col_third">
        <div class="hover panel">
          <div class="front">
            <div class="box1">
              <p>Front Side</p>
            </div>
          </div>
          <div class="back">
            <div class="box2">
              <p>Back Side</p>
            </div>
          </div>
        </div>
		</div>

		<div class="col_third end">
        <div class="hover panel">
          <div class="front">
            <div class="box1">
              <p>Front Side</p>
            </div>
          </div>
          <div class="back">
            <div class="box2">
              <p>Back Side</p>
            </div>
          </div>
        </div>
      </div>
	 </div>