JSFiddle - React, Tailwind, and code Playground

by linmic

HTML

<div class="header">
    <h1 class="logo"><img src="http://icons.iconarchive.com/icons/femfoyou/angry-birds/256/angry-bird-icon.png" /></h1>
</div>

SCSS

body {
    position: relative;
}

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

JavaScript

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