Scale simple rectangle with .css on hover

Good eveningdear members,
I uploadedyoua sample projectto illustratetheproblem. (Dropbox - Example.zip)
Over all I only want toresizea rectanglewith ahover effect. However, the problemarises thatthe sizeof the rectanglewithscale =1changes?!

I createa rectangle"button" and give the "button" as mouseout-action the following code:

varobject =sym$ ("button").
rescale=1;

object.css('transform', 'scale(' + rescale+ ')');
object.css('o-transform', 'scale(' + rescale+ ')');
object.css('- ms-transform', 'scale(' + rescale+ ')');
object.css('- webkit-transform', 'scale(' + rescale+ ')');
object.css('- moz-transform', 'scale(' + rescale+ ')');
object.css('- o-transform', 'scale(' + rescale+ ')');
object.css('z-index', '1');

I don´t understandwhythe rectangle is changing!

Maybe you canexplain it to me :-)


Best regardsandmany thanks

Marc