CSS3翻轉在Internet Explorer中不起作用

點擊按鈕時，我有一個div翻轉，以顯示另一個div。CSS3翻轉在Internet Explorer中不起作用

<div class="flip-container"> 
    <div class="flipper"> 
     <div class="front"><h1>FRONT</h1></div> 
     <div class="back"><h1>BACK</h1></div> 
    </div> 
</div> 

<button class="flipper-btn">Flip it!</button>

這是工作在鉻漂亮，但（當然）不是在IE瀏覽器。它只是顯示.front div的背面，而不是.back div。我搜尋了一個答案，發現其他一些人也遇到了同樣的問題，但是我一直無法工作。

http://jsfiddle.net/0sypya5h/3/

希望有人能幫助... ...

來源

2014-12-04 user2969934

'在IE9 + HTTP transform'工作：// caniuse。 com /＃search = CSS3％20Transforms – 2014-12-04 19:57:51

什麼是您的IE版本？ – 2014-12-04 19:58:59

IE11 .......... – user2969934 2014-12-04 20:02:56

這裏的問題是在Internet Explorer 11的lack of support for preserve-3d我們http://remote.modern.ie最近推出的支持（支持在Android，OS X，iOS版時，Windows，和Windows Phone）。

您可以預計這將在即將到來的穩定版本中着陸。直到本機支持船舶您可能會發現更多的成功既動畫元素的獨立，而不是試圖所以，在複利的方式：

.flipped .front { 
    transform: rotateY(180deg); 
} 

.flipped .back { 
    z-index: 1; 
    transform: rotateY(0deg); 
}

小提琴：http://jsfiddle.net/jonathansampson/wv3rymoe/

來源

2014-12-04 20:06:32 Sampson

你的小提琴在ie 11中不起作用 – 2017-06-30 04:39:43

@ClaudiuCreanga嘗試'-ms-transform'而不是'transform'。 – Sampson 2017-07-21 19:09:06

無法正常工作。從我所知道的 - 變形再也不存在了。它在IE的某些版本中得到了支持，但在ie11的最新版本中被刪除，目前還沒有最新版本，即瀏覽器支持它。 – 2017-07-22 08:56:00

CSS3翻轉在Internet Explorer中不起作用

回答

相關問題