Why is Image 2 not visible in IE when transformed 90 degrees with some perspective? It works fine in other browsers, but IE always keeps you guessing for hours for no reason. Html :
<body>
<div class="scene">
<div class="cube">
<div class="cube-face cube-face-front"><img src="http://imageshack.us/a/img545/9813/58zj.jpg" alt="Images"> </div>
<div class="cube-face cube-face-top"> <img src="http://imageshack.us/a/img818/5776/8ik6.jpg" alt="Images"> </div>
</div>
</div>
Css :
body {
-webkit-transition: all .6s;
-moz-transition: all .6s;
-o-transition: all .6s;
-ms-transition: all .6s;
transition: all .6s;
width: 960px;
margin: 100px auto;
}
.scene {
margin-top: 50px;
width: 300px;
height: 300px;
-webkit-perspective: 3000px;
border: 5px solid black;
}
.cube {
cursor: pointer;
width: inherit;
height: inherit;
position: relative;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-o-transition: all 2s;
-ms-transition: all 2s;
transition: all 2s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-15deg) rotateY(-15deg);
-moz-transform: rotateX(-15deg) rotateY(-15deg);
-o-transform: rotateX(-15deg) rotateY(-15deg);
-ms-transform: rotateX(-15deg) rotateY(-15deg);
transform: rotateX(-15deg) rotateY(-15deg);
}
.cube-face {
width: inherit;
height: inherit;
position: absolute;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
filter: alpha(opacity=95);
opacity: 0.95;
}
.cube-face-front {
-webkit-transform: translate3d(0,0,0px);
-moz-transform: translate3d(0,0,0px);
-o-transform: translate3d(0,0,0px);
-ms-transform: translate3d(0,0,0px);
transform: translate3d(0,0,0px);
}
.cube-face-top {
-webkit-transform: rotateX(90deg) translate3d(0,-150px,150px);
-moz-transform: rotateX(90deg) translate3d(0,-150px,150px);
-o-transform: rotateX(90deg) translate3d(0,-150px,150px);
-ms-transform: rotateX(90deg) translate3d(0,-150px,150px);
transform: rotateX(90deg) translate3d(0,-150px,150px);
}
.cube:hover {
-webkit-transform: rotateX(-90deg) translate3d(0,150px,150px);
-moz-transform: rotateX(-90deg) translate3d(0,150px,150px);
-o-transform: rotateX(-90deg) translate3d(0,150px,150px);
-ms-transform: rotateX(-90deg) translate3d(0,150px,150px);
transform: rotateX(-90deg) translate3d(0,150px,150px);
}
img {
width: inherit;
height: inherit;
}
View my code pen here Take a look at my screenshot