Flip-Effekt in Internet Explorer

Question

Ich habe einen Code, um Flip zu einem div. Es funktioniert gut in Firefox und Chrome, aber in IE, wenn die Karte kippt, zeigt es die Vorderseite auf den Kopf, anstatt die Rückseite zu zeigen.

Dies ist der Code:

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

Wie Shaggy kommentiert, nicht IE unterstützt preserve-3d. Es fehlt auch Unterstützung für die Rückseitensichtbarkeit: versteckt;

So können Sie den Container nicht drehen, müssen Sie die Elemente einzeln drehen.

Und Sie brauchen die Sichtbarkeit (mit der Hälfte der Übergangszeit einzustellen, wollen Sie es in der Mitte der Rotation passieren.

Dies ist das Ergebnis, ok auf modernen Browsern und auch auf 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>