I am trying to create a light saber. You will see the problem when you hover over it. I would like the bottom of it to stay stationary while the end of it extends. I know things are more complicated because it is rotated. http://jsfiddle.net/aaronheine/L4Epe/
That's happening because of the way rotate works. Hover over the box: http://jsfiddle.net/L4Epe/25/ Rotate is animating because of the 'all' set on the transition property.
Yeah, I'm saying that you can't do it the way you want to do it. The change in width changes the position of the element due to the rotation (and then you 'un-hover').
You're going to have to have the element contain the final width if you want hover + rotate to work together.
I would like the bottom of it to stay stationary while the end of it extends.
I know things are more complicated because it is rotated.
http://jsfiddle.net/aaronheine/L4Epe/
Thanks and may the force be with you.
Rotate is animating because of the 'all' set on the transition property.
I've also done a lightsaber CSS 'experiment'. http://css-plus.com/examples/2011/06/css-lightsabers/
May the force be with you.
You're going to have to have the element contain the final width if you want hover + rotate to work together.