Mon, 2013-04-22 20:53
Hello,
I want to make a transition of a pop-up div using the css3 transition feature. However I can't seem to figure out how to change the direction of the transition. I used this example to experiment with it but I cannot let the block expand from the right to the left.
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; transition:width 2s; -webkit-transition:width 2s; /* Safari */ } div:hover { width:300px; } </style> </head> <body> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> <div></div> <p>Hover over the div element above, to see the transition effect.</p> </body> </html>
Can you guys help me?
Thanks in advance,
Pepijn
Tue, 2013-04-23 08:23
#1
As you haven't actually set
As you haven't actually set any properties other than 'width' I guess the transition defaults to whatever the default screen layout is i.e ltr. You can set transitions for most of the properties available and grouped together in a shorthand style statement. I think you need to play around with properties such as offsets e.g 'right' you may even need a combination of a few properties to get the effect.