FF + Webkit. CSS Animation (rotate and scale)

by Oski Krawczyk

HTML

<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>

CSS

div {
    height: 100px;
    width: 100px;
    border: solid 2px red;
    margin: 20px;
    float: left;
    background: rgba(0, 0, 0, 0.1);
}

JavaScript

Element.Styles.MozTransform = "rotate(@deg) scale(@)";

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+')';
        }
    }
});

$('b1').addEvent('click', function() {
    $('b1').tween('-moz-transform', 'rotate(0deg)', 'rotate(50deg)');
});

$('b2').addEvent('click', function() {
    $('b2').tween('-moz-transform', 'scale(0.5)', 'scale(1)');
});

$('b3').addEvent('click', function() {
    $('b3').set('morph', {
        duration: 2000,
        transition: 'back:out'
    });
    $('b3').morph({
        '-moz-transform': ['rotate(50deg) scale(1)', 'rotate(320deg) scale(2)']
    });
});