元素不可見時轉換90度在css3只在ie？

我不明白爲什麼我不能看到圖像2是從一些角度轉換90度的？它適用於所有其他瀏覽器。 IE只是岩石。 IT讓你無緣無故地在接下來的幾個小時內忙碌起來。 HTML：元素不可見時轉換90度在css3只在ie？

<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; 
}

Here my code pen My screen shot

來源

2013-10-10 Gautam Kumar

這只不過是不支持IE。見http://caniuse.com/transforms3d

你會發現，IE只提供部分支持，說明在IE10

部分支持指的是不支持變換風格：保持-3D性能。

我已經找了一個polyfill，但它似乎並不像目前存在。如果你想得到全面的支持，你必須在jQuery中做到這一點。

在一個側面說明，我認爲你有一個很好的動畫，我不認爲你應該擔心IE，因爲大多數人都使用Chrome或FF ..太糟糕了IE必須落後。

來源

2013-10-10 18:21:00

謝謝你這麼好的參考。 –

迄今爲止，IE10還是很讓人失望，現在它支持大約99％的HTML5規範 - 然後只是缺少一些重要的東西，幾乎沒有機會製作Javascript解決方法。 – Katana314

@ Katana314是的 - 非常令人失望。特別是因爲他們現在正在開發支持有限的移動設備。 –

元素不可見時轉換90度在css3只在ie？

回答

相關問題