Problems with CSS3

Problems with CSS3

Post by KthProg on Mon Feb 25, 2013 10:16 pm
([msg=74162]see Problems with CSS3[/msg])

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?
User avatar
KthProg
Poster
Poster
 
Posts: 219
Joined: Wed Jan 23, 2013 7:06 pm
Blog: View Blog (0)


Re: Problems with CSS3

Post by Fizbo on Mon Mar 18, 2013 4:48 am
([msg=74596]see Re: Problems with CSS3[/msg])

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 % */
}
Fizbo
New User
New User
 
Posts: 1
Joined: Mon Mar 18, 2013 4:40 am
Blog: View Blog (0)


Re: Problems with CSS3

Post by KthProg on Wed Apr 03, 2013 6:23 pm
([msg=74892]see Re: Problems with CSS3[/msg])

Thank you.
User avatar
KthProg
Poster
Poster
 
Posts: 219
Joined: Wed Jan 23, 2013 7:06 pm
Blog: View Blog (0)



Return to Web Design

Who is online

Users browsing this forum: No registered users and 0 guests