Scale simple rectangle with .css on hover

Question

Good evening dear members,
I uploaded you a sample project to illustrate the problem. (Dropbox - Example.zip)
Over all I only want to resize a rectangle with a hover effect. However, the problem arises that the size of the rectangle with scale = 1 changes?!
I create a rectangle "button" and give the "button" as mouseout-action the following code:
var object = 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 understand why the rectangle is changing!
Maybe you can explain it to me :-)
Best regards and many thanks
Marc

Answer 1

It shouldn't get smaller, in fact at a value of 1, it should not change at all because 1 equates to 100% of the original.
Change the value to a higher number, like 2, for example. Which says 'transform to 200% of the original'.
var object = sym.$("button");
rescale= 2;
object.css({
            'transform': 'scale(' + rescale + ')',
            '-ms-transform': 'scale(' + rescale + ')',
            '-moz-transform': 'scale(' + rescale + ')',
            '-webkit-transform': 'scale(' + rescale + ')',
            '-o-transform': 'scale(' + rescale + ')',
            'z-index':'1'
To get a better understanding of how the values work and there equivalents.
- Select any element on your Stage;
- Then toy with the Transform property (see capture);
- as captured a transform at 167% equates to a value of 1.67
hth
Darrell