flair (pure CSS 3D)

flair (pure CSS 3D)

Go to Source

See the Code
See it Full Page
See Details

Live coded in 17 minutes on the 29th of April 2016. Uses `transform-style: preserve-3d`, so it won't work in any IE. Won't work in Edge either because I am using a `brightness()` filter to get the different shades for each block and [3D transforms and filters don't play nice together in Edge](https://twitter.com/AmeliasBrain/status/726070190123839488) (track issue [here](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7388396/)). Tested and works in Firefox 46 (purrfect!) and Chrome 50 ([edges look a bit ugly](https://twitter.com/anatudor/status/726156010453344257)).

Inspiration:

![original gif](http://45.media.tumblr.com/79c86228c1ad31e6d5fd9149da6edb09/tumblr_o1ol8qXfmL1qbgdnxo1_540.gif)

From [Sasj](http://sasj.tumblr.com/post/138234955260/geometric-animations-160128).

This Pen uses: Haml, SCSS, JavaScript, and