JSFiddle - React, Tailwind, and code Playground

by davidck

HTML

<script src="https://raw.github.com/davidck/Fx.Anything/0.1/Source/Fx.Anything.js"></script>
<div class="engine">
    <div class="propeller"></div>
</div>

CSS

body {
    padding: 80px;   
}
.engine {
    position: relative;
    width: 300px; height: 300px;
}
.propeller {
    background: url('http://www.learning-to-fly.com/images/Propeller1.jpg') white no-repeat left top;   
    position: absolute;
    left: 0; top: 0;
    width: 300px; height: 300px;
    transform-origin: 142px 143px;
    -ms-transform-origin: 142px 143px;
    -webkit-transform-origin: 142px 143px;
    -moz-transform-origin: 142px 143px;
    -o-transform-origin: 142px 143px;
}

JavaScript

var _propeller = document.body.getElement('.propeller');

var rotation = 0;
var fx = new Fx.Anything({
    duration: 20000,
    transitions: Fx.Transitions.Quad.easeInOut,
    onReport: function(progress) {
        rotation = progress*(360*12);
        
        var str_rotation = 'rotate('+rotation+'deg)';
        _propeller.setStyles({
            'transform': str_rotation,
            '-ms-transform': str_rotation,
            '-webkit-transform': str_rotation,
            '-o-transform': str_rotation,
            '-moz-transform': str_rotation
        });
    }        
});

fx.start();