在IE翻轉動畫：翻轉側顯示鏡像內容

我想實現從以下website翻轉動畫，我得到它的工作沒有懸停效果和一個按鈕切換過渡。看到這個Fiddle 在IE翻轉動畫：翻轉側顯示鏡像內容

IE的給定代碼在懸停時工作良好，但通過使用按鈕第二個按鈕顯示在右上角並帶有文本鏡像。？有人能指點我如何使它顯示在左上角爲其他瀏覽器正常這只是IE的CSS片的：

 /* entire container, keeps perspective */ 
.flip-container { 
    perspective: 1000; 
    transform-style: preserve-3d; 
} 
    /* UPDATED! flip the pane when hovered */ 
    .flip-container.hover .back { 
     transform: rotateY(0deg); 
    } 
    .flip-container.hover .front { 
     transform: rotateY(180deg); 
    } 

.flip-container, .front, .back { 
    width: 100%; 
    height: 500px; 
} 

/* flip speed goes here */ 
.flipper { 
    transition: 0.6s; 
    transform-style: preserve-3d; 

    position: relative; 
} 

/* hide back of pane during swap */ 
.front, .back { 
    backface-visibility: hidden; 
    transition: 0.6s; 
    transform-style: preserve-3d; 

    position: absolute; 
    top: 0; 
    left: 0; 
} 

/* UPDATED! front pane, placed above back */ 
.front { 
    z-index: 2; 
    transform: rotateY(0deg); 
} 

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

/* 
    Some vertical flip updates 
*/ 
.vertical.flip-container { 
    position: relative; 
} 

    .vertical .back { 
     transform: rotateX(180deg); 
    } 

    .vertical.flip-container:hover .back { 
     transform: rotateX(0deg); 
    } 
.vertical.flip-container:hover .front { 
    transform: rotateX(180deg); 
} 
}

來源

2015-04-08 Erick

IE已經知道與變換屬性的問題。對於您的示例，在僅限IE的樣式上，從父div刪除懸停（.hover）上的轉換。見fiddle。

.flip-container.hover .flipper { 
    transform: none; 
}

來源

2015-04-08 15:16:20 Neps

是的完美！非常感謝你 – Erick

嗨，我只是想你的答案。它的工作原理，但你可以請chk它與http://stackoverflow.com/questions/32455596/flip-box-height-of-back-side-also-doesnot-work-on-ie –

在IE翻轉動畫：翻轉側顯示鏡像內容

回答

相關問題