Grow your CSS skills. Land your dream job.

I need a Jedi to help with placement of CSS3 transition

  • # January 30, 2012 at 1:16 pm

    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.

    # January 30, 2012 at 1:52 pm

    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.

    # January 30, 2012 at 2:00 pm

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

    # January 30, 2012 at 2:08 pm

    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.

    # January 30, 2012 at 9:01 pm

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

    # January 31, 2012 at 1:21 am

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

    # January 31, 2012 at 1:56 am

    @jamy_za It’s a pretty handy property.

    # January 31, 2012 at 10:31 am

    That got it, thanks!

    # February 1, 2012 at 1:57 am

    No worries mate.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".