Problems with CSS3

[KthProg]

I used a CSS3 transformation to make the header text on my page wider and stretch it out, but for some reason it also changes the location of the text. it basically looks like <table><tr><td><h2>stretched text<closing tags>
and the CSS is
h2{
transform:scale(2,1); /* W3C */
-webkit-transform:scale(2,1); /* Safari and Chrome */
-moz-transform:scale(2,1); /* Firefox */
-ms-transform:scale(2,1); /* IE 9 */
-o-transform:scale(2,1); /* Opera */
}

how do I get it back to the same location?

[Fizbo]

the scale(2,1) double the width so the position is changed to -50% so you can use

Code: Select all

h2{
transform:scale(2,2); /* W3C */
/* Opera */
-webkit-transform:scale(2,2); /* Safari and Chrome */
-moz-transform:scale(2,2); /* Firefox */
-ms-transform:scale(2,2); /* IE 9 */
-o-transform:scale(2,2);
position:relative;/*relative to th original position of your header*/
left: ;/*you can change it  as you like it with px values or % */
}


[KthProg]

Thank you.