JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<div id="test"></div>

CSS

#test {
    width: 200px;
    height: 200px;
    border: solid 2px red;
    background: #999;
}

JavaScript

Fx.CSS.Parsers.extend({

    TransformRotate: {
        parse: function(value){
            return ((value = value.match(/^rotate\(([-+]?([0-9]*\.)?[0-9]+)deg\)$/i))) ? parseFloat(value[1]) : false;
        },
        compute: function(from, to, delta){
            return Fx.compute(from, to, delta);
        },
        serve: function(value){
            return 'rotate('+value+'deg)';
        }
    },

    TransformScale: {
        parse: function(value){
            return ((value = value.match(/^scale\((([0-9]*\.)?[0-9]+)\)$/i))) ? parseFloat(value[1]) : false;
        },
        compute: function(from, to, delta){
            return Fx.compute(from, to, delta);
        },
        serve: function(value){
            return 'scale('+value+')';
        }
    },

    TransformSkew: {
        parse: function(value){
            return ((value = value.match(/^skew\(([-+]?([0-9]*\.)?[0-9]+)deg,([-+]?([0-9]*\.)?[0-9]+)deg\)$/i))) ? [parseFloat(value[1]),parseFloat(value[3])] : false;
        },
        compute: function(from, to, delta){
            return from.map(function(value, i){
                return Fx.compute(from[i], to[i], delta);
            });
        },
        serve: function(value){
            return 'skew('+value[0]+'deg,'+value[1]+'deg)';
        }
    }

});


$('test').addEvent('click', function(){
    this.morph({
        '-moz-transform': 'rotate(20deg)'
    });
});