Gabriel Martin

{GIF} Rotation Experiment #1

  • Save
{GIF} Rotation Experiment #1 spinner code sass webkit hsl front-end frontend art open source css animation gif

This is a low res capture of one of the CSS experiments I've been creating lately, you'll find the full version at this link. It looks quite a bit different when rendered by the browser.

These experiments help me grow as a front-end dev by seeing what's possible via art.

This effect consists of 100 rectangles, with rounded edges, and incrementally decreasing opacity. This are animated using CSS keyframe animations to rotate on the Z, X, and Y axis. Further, the color shift is created by using HSL, and iteratively adding the rectangle's number to the hue.

This is totally open source, so please feel free to fork this and have fun

keyboard shortcuts: L or F like