title: Element not visible when transformed 90 deg in css3 in ie only?
body: <p>I don't understand why i cant see Image 2 which is transformed 90deg with some perspective?
  It works perfectly in all other browsers.
  IE just rocks. IT keeps you busy for next few hours for no reasons.
  Html :</p>
  
  <pre><code>&lt;body&gt;
  
            &lt;div class="scene"&gt; 
              &lt;div class="cube"&gt;
                  &lt;div class="cube-face  cube-face-front"&gt;&lt;img src="http://imageshack.us/a/img545/9813/58zj.jpg" alt="Images"&gt; &lt;/div&gt;
                   &lt;div class="cube-face  cube-face-top"&gt; &lt;img src="http://imageshack.us/a/img818/5776/8ik6.jpg" alt="Images"&gt; &lt;/div&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>Css :</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p><a href="http://codepen.io/gautam/pen/Clwki" rel="nofollow">Here my code pen</a>
  <a href="http://img824.imageshack.us/img824/557/fd3t.jpg" rel="nofollow">My screen shot</a></p>