JSFiddle - React, Tailwind, and code Playground

by linmic

HTML

<div class="header">
    <h1 class="logo"><img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" /></h1>
</div>

SCSS

html, body { height: 100%; width: 100%; } 
body { position: relative; }
img { max-width: 100%; }

.header {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    -webkit-perspective: 1000;
    .logo {
        height: 256px;
        width: 256px;
        -webkit-transition: -webkit-transform .75s;  
        -webkit-transform-style: preserve-3d; 
        -webkit-transform: rotateY(-180deg);
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -128px;
        margin-left: -128px;    
        .dom-ready & {
            -webkit-transform: rotateY(-360deg);
            -webkit-transition-duration: .5s;
        }
        .dom-ready-2 & {
            -webkit-transform: rotateY(0deg) scale(0.5,0.5);
        }
    }
}

JavaScript

(function($){
    $(function(){
       $('body').addClass('dom-ready'); 
       $('.logo').bind('webkitTransitionEnd',function(){
           $('body').addClass('dom-ready-2');            
       });
    });
})(jQuery);