JSFiddle - React, Tailwind, and code Playground

by MarmiK

HTML

<div>
    <img src="http://icons.iconarchive.com/icons/chromatix/keyboard-keys/128/2-icon.png">
</div>

CSS

div {
    -webkit-perspective: 1000;
}

img {
    -webkit-transition: all 1s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(-180deg);
}

img.r1 {
    -webkit-transform: rotateY(-360deg) scale(1);
}

img.r2 {
    -webkit-transform: rotateY(0deg) scale(0.5);
}

JavaScript

(function() {
    $('img').addClass('r1').bind('webkitTransitionEnd', function() {
        $(this).attr('class', 'r2');
    });
})();