This goes into my category of stupid CSS3 tricks. I think at some point I was playing with animations and timing, and I thought that the coolest and most useless CSS3 thing I could come up with is a pendulum. Warning, it only works in Google Chrome.

A run down on the CSS

Basically, I created three animations: Swing, shadow, and ball-shadow. That ball-shadow was by far the most difficult and I still don’t think I pulled it off perfectly.

Swing is relatively obvious, it caused the full pendulum to swing 15 degrees in either direction. Shadow is actually the box-shadow around the arm and the ball. Hopefully it’s not too obvious, but the shadow adjusts as though you were standing in the exact center; the shadow drifts to give the additional sense that it’s adjusting from your centered perspective.

Ball-shadow was freakin’ hard, so I welcome input on improvements. I wanted to give the perspective of global light that (obviously) exists somewhere to the upper right. I experimented a lot with rotate, skew, and transform to get the shadow to roughly match the size of the ball, get darker as the ball gets closer, and then stretches and fades as the ball gets farther away.

Yeah, it’s boredom²