2

I know this title it's a bit (ok, a lot) ambiguous.

What I am really asking here it's quite simple:

I have a round slider, that uses and handle (the javascript code add transform(rotate(xDeg); to the handle DOM element, so that it follows the round track.

That's fine, but I'd like to add a shadow always displaying at the bottom (lights coming from the top) on this handle.

The way I was thinking about (and that I actually try) was to create a pseudo element (:after) and then force this element to stay o deg when rotating, but unfortunately this doesn't work as apparently the element rotates anyway as the parent does.

here's a quick pen explaining what I am talking about:

http://codepen.io/NickHG/pen/jBXxLd

Long story short: is it possible to fix the shadow? suggestions on how can I achieve this? thanks

Nick
  • 13,493
  • 8
  • 51
  • 98
  • http://stackoverflow.com/questions/9779919/css-rotate-a-pseudo-after-or-before-content – roberrrt-s Mar 31 '17 at 14:49
  • it's exactly the opposite of what I am trying to do. I don't want to rotate this. This needs to be detached and stay still when the parent rotate (but still following it) – Nick Mar 31 '17 at 14:50
  • 1
    You can't detach it from its parent, so there is 2 ways, you either need to counter the rotation effect for a child element such a pseudo, or use a sibling and adjust its position – Asons Mar 31 '17 at 15:12
  • In your opinion, which one is the best solution? bearing in mind that it needs to be fully responsive and work on a bunch of mobile devices as well.. – Nick Mar 31 '17 at 15:13
  • Since transform is more performant, I would go with counter the rotation – Asons Mar 31 '17 at 15:14
  • ok, so basically to recap this: I need to modify the library so that when handle get's animated, the pseudo element gets some animation as well to display the shadow always at the bottom, correct? – Nick Mar 31 '17 at 15:15
  • 1
    Yepp, that is correct ... and btw, the absolute best would of course be that the _handle_ didn't rotate at all, just followed a path – Asons Mar 31 '17 at 15:16

0 Answers0