CSS轉換IE問題

Question

我想構建一個簡單的CSS卡翻轉樣式頁面，它適用於除IE 11之外的所有瀏覽器，我不知道爲什麼。我認爲它是與下面的代碼：

/* entire container, keeps perspective */ 
.flip-container { 
    perspective: 1000; 
    -moz-perspective: 1000; 
    -webkit-perspective: 1000; 
} 
    /* flip the pane when hovered */ 
    .flip-container:hover .flipper, .flip-container.hover .flipper { 
     transform: rotateY(180deg); 
     -ms-transform: rotateY(180deg); 
     -webkit-transform: rotateY(180deg); 
     -moz-transform: rotateY(180deg); 
     -o-transform: rotateY(180deg); 

    } 

.flip-container, .front, .back { 
    width: 300px; 
    height: 300px; 
} 

/* flip speed goes here */ 
.flipper { 
    transition: 0.6s; 
    -webkit-transition: 0.6s; 
    -moz-transition: 0.6s; 
    -o-transition: 0.6s; 
    transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
    position: relative; 
} 

/* hide back of pane during swap */ 
.front, .back { 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

/* front pane, placed above back */ 
.front { 
    z-index: 2; 
    /* for firefox 31 */ 
    transform: rotateY(0deg); 
    -webkit-transform: rotateY(0deg); 
    -moz-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
    -o-transform: rotateY(0deg); 

} 

/* back, initially hidden pane */ 
.back { 
    transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
} 

這是我的jsfiddle ...測試在Chrome中看到它如預期運行，然後檢查IE 11，看它會崩潰。

https://jsfiddle.net/xebcx8gt/2/

Answer 1

您必須指定要添加過渡到CSS屬性。我猜測Chrome是寬容的，並假設你的意思是all，當沒有指定任何東西時。

將您的transition: 0.6s;更改爲transition: transform 0.6s;。

有關transition屬性及其語法的更多信息，請查看MDN's page on it。