I have a grouped set of elements"Elvekraftverk" that I want to increase from 25-30% on mouseover and down to 25% again on mouseout.
Using this piece of code:
mouseover
//skaler elvekraftverk opp til 30%
$(sym.lookupSelector("Elvekraftverk")).css({
"transform":"scaleX(0.3) scaleY(0.3)",
"-ms-transform":"scaleX(0.3) scaleY(0.3)", /* IE 9 & 10 */
"-moz-transform":"scaleX(0.3) scaleY(0.3)", /* Firefox */
"-webkit-transform":"scaleX(0.3) scaleY(0.3)", /* Safari and Chrome */
"-o-transform":"scaleX(0.3) scaleY(0.3)" /* Opera */
});
mouseout
//skaler elvekraftverk tilbake til 25%
$(sym.lookupSelector("Elvekraftverk")).css({
"transform":"scaleX(0.25) scaleY(0.25)",
"-ms-transform":"scaleX(0.25) scaleY(0.25)", /* IE 9 & 10 */
"-moz-transform":"scaleX(0.25) scaleY(0.25)", /* Firefox */
"-webkit-transform":"scaleX(0.25) scaleY(0.25)", /* Safari and Chrome */
"-o-transform":"scaleX(0.25) scaleY(0.25)" /* Opera */
});
and it does work, but with an unwanted addition, it also moves the grouped elements to the center of my stage...
I played around a bit and I think I know why it happens, the group will later on be scaled to 100% (onclick) and repositioned to fill the stage. When in 25-30% it it positioned of to the left of the stage.
How can I make it "stay put" when using transform to scale it ?