I need a Jedi to help with placement of CSS3 transition

[Historical Forums User]

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/

Thanks and may the force be with you.

[jamygolden]

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.

I’ve also done a lightsaber CSS ‘experiment’. http://css-plus.com/examples/2011/06/css-lightsabers/
May the force be with you.

[Historical Forums User]

I have tried that. When I change “all” to just “width” nothing happens.

[jamygolden]

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.

[joshuanhibbert]

Ah, you simply need to add transform-origin: 0 0; (with prefixes).

[jamygolden]

Oh really? Nice one – I haven’t used that property before.

[joshuanhibbert]

@jamy_za It’s a pretty handy property.

[Historical Forums User]

That got it, thanks!

[joshuanhibbert]

No worries mate.

[Author]

Posts