The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS I need a Jedi to help with placement of CSS3 transition

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #36402

    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.

    Thanks and may the force be with you.


    That’s happening because of the way rotate works. Hover over the box:
    Rotate is animating because of the ‘all’ set on the transition property.

    I’ve also done a lightsaber CSS ‘experiment’.
    May the force be with you.


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


    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.


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


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


    @jamy_za It’s a pretty handy property.


    That got it, thanks!


    No worries mate.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.