Rotating box-shadow on circular element

[Fazure]

Hi all! This is my first post so please forgive me if I’m doing something wrong.

A few days ago I wanted an element that rotates its box-shadow when acted upon (hovered etc).

First, I tried simply changing the box-shadow to a different spot on the element, but that would make the box-shadow clip through the underside of the element and wasn’t really rotating anyway.

Then I tried using animations and keyframes, which got me a bit farther. However I couldn’t figure out a way to make it work effectively so I scratched that.

At last I stumbled across the solution – creating a parent div identical in size/shape to the child div. Acting on the parent element would rotate it (and its box-shadow) 180 degrees, while also rotating its content -180 degrees, effectively leaving it out.

I’ve got a better example at this codepen: http://codepen.io/Fazure/pen/NpboGo

[bearhead]

Are you asking if there is a better method? Your solution is probably what I would have recommended… the only thing I would suggest is adding box-sizing:border-box to the child, and also changing the height and width of the child to 100%.

[Fazure]

I was more just sharing what I found, but thanks for those tips! As I’ve said, it’s my first post so I wasn’t sure if this area was intended exclusiveky for asking questions or seeking help.

[Author]

Posts