JSFiddle - React, Tailwind, and code Playground

by ryanwfiorini

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;
        -ms-perspective: 1000;
        -moz-perspective: 1000;
        perspective: 1000;
    }
      
    .container, .card {width: 652px; height: 284px; position:absolute; top:0; left:0; font-family: sans-serif;}

    .card {
        width: 100%;
        height: 100%;
        -webkit-transition: all 0.5s linear;        
        -ms-transition: all 0.5s linear;
        -moz-transition: all 0.5s linear;
        transition: all 0.5s linear;
        -webkit-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
    }
        
    .front {

    }

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

    .container:hover .card {
      -webkit-transform: rotateY(360deg);
      -ms-transform: rotateY(360deg);
      -moz-transform: rotateY(360deg);
      transform: rotateY(360deg);
        }