JSFiddle - React, Tailwind, and code Playground

by felixthehat

HTML

<div class="container">
        
        <div class="cards">
            
            <div class="card front">
                <img src="http://i.nokia.com/image/view/-/1213860/highRes/1/-/Demopage-900-US-social-start-png.png" width="652" height="282">
            </div>
        
            <div class="card back">
                <h1>Help why is this not working in IE?</h1>
            </div>
            
        </div>    
    
    </div>

CSS

.container {    
    -webkit-perspective: 1000;
     perspective: 1000;
}
  
.container, .card {width: 652px; height: 284px; position: absolute; top: 0; left: 0; font-family: sans-serif;}

.cards {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 0.5s linear;
    -MS-transform-style: preserve-3d;
    -MS-transition: all 0.5s linear;
    transform-style: preserve-3d;
    transition: all 0.5s linear;
}
  
.card {
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}
    
.front {

}

.back {
    background: orange; text-align:center; line-height:200px;
    -MS-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
 }

.container:hover .cards {
  -webkit-transform: rotateY(180deg);
  -MS-transform: rotateY(180deg);
  transform: rotateY(180deg);
}