Internet Explorer中的翻轉效果

Question

我有一個代碼可以翻轉爲div。它在Firefox和Chrome中運行良好，但在IE瀏覽器中翻牌時，顯示正面顛倒而不顯示背面。

這是代碼：

body { 
 
    background: #eee; 
 
} 
 

 
.card{ 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 

 
.content { 
 
    width: 300px; 
 
    height: 300px; 
 
    perspective: 500px; 
 
    box-shadow: 0 0 15px rgba(0,0,0,0.1); 
 
    transition: transform 1s; 
 
    transform-style: preserve-3d; 
 
} 
 

 
.card:hover .content { 
 
    transform: rotateX(180deg) ; 
 
    transition: transform 0.5s; 
 
} 
 

 
.front, 
 
.back { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: white; 
 
    line-height: 300px; 
 
    color: #03446A; 
 
    text-align: center; 
 
    font-size: 60px; 
 
    border-radius: 5px; 
 
    backface-visibility: hidden; 
 
    } 
 

 
.back { 
 
    background: #03446A; 
 
    color: white; 
 
    transform: rotateX(180deg); 
 
}

<div class="card"> 
 
    <div class="content"> 
 
    <div class="front"> 
 
     Front 
 
    </div> 
 
    <div class="back"> 
 
     Back! 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

如長毛評論的，IE不支持保存-3d中。它也缺乏對背面知名度的支持：隱藏;

所以，你不能旋轉容器，你必須單獨旋轉元素。

而且你需要調整能見度（一半的過渡時間，你希望它在旋轉當中發生。

這是結果，工作在現代瀏覽器確定，也對IE

body { 
 
    background: #eee; 
 
} 
 

 
.card{ 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 

 
.content { 
 
    width: 300px; 
 
    height: 300px; 
 
    perspective: 500px; 
 
    box-shadow: 0 0 15px rgba(0,0,0,0.1); 
 
    transition: transform 1s; 
 
    transform-style: preserve-3d; 
 
} 
 

 
.card:hover .content { 
 
} 
 

 
.front, 
 
.back { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: white; 
 
    line-height: 300px; 
 
    color: #03446A; 
 
    text-align: center; 
 
    font-size: 60px; 
 
    border-radius: 5px; 
 
    backface-visibility: hidden; 
 
    } 
 

 

 
.front { 
 
    transition: visibility 0.5s, transform 1s; 
 
} 
 

 
.card:hover .front { 
 
    visibility: hidden; 
 
    transform: rotateX(180deg); 
 
} 
 

 
.back { 
 
    background: #03446A; 
 
    color: white; 
 
    transform: rotateX(-180deg); 
 
    transition: visibility 0.5s, transform 1s; 
 
} 
 

 
.card:hover .back { 
 
    transform: rotateX(0deg); 
 
    
 
}

<div class="card"> 
 
    <div class="content"> 
 
    <div class="front"> 
 
     Front 
 
    </div> 
 
    <div class="back"> 
 
     Back! 
 
    </div> 
 
    </div> 
 
</div>