CSS3 transition is not working in internet explorer

<div class="col-md-3 col-xs-6">
                      <div class="cube">
                        <div class="flippety">
                            <img src="img/cube5.png" width="98%">
                        </div>
                        <div class="flop">
                            <img src="img/cube6.jpg" width="98%">
                            
                        </div>
                    </div>
                    <br><br>
                  </div>

.cube:hover {
    
	-webkit-transform: rotateX(89deg);
	transform: rotateX(89deg);
     
}
.cube {
	text-align: center;
	margin: auto auto;
	height: 110px;

	-webkit-transition: -webkit-transform .33s;
	transition: transform .33s; /* Animate the transform properties */
    
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d; /* <-NB */
}
.flop {
    -ms-transform: rotateX(-90deg) translateZ(-50px);
	-webkit-transform: rotateX(-90deg) translateZ(-50px);
	transform: rotateX(-90deg) translateZ(-50px);
}