See the Code - See it Full Page - See Details
This is not my first time making [dancing hexagons](https://codepen.io/danwilson/pen/LWPavK)... but the tiling is so much simpler and more consistent now with CSS grid. I made the original dancing hexagons to show off individual transform functions (via `transform` + CSS variables). This pen is a chance to use Houdini and CSS keyframe animations instead of a bunch of setTimeouts + CSS Vars (as I did in the original dance)... as such the full experience is only in Chrome Canary with Experimental Web Platform Features as of 2/2018. ### Why this is interesting... There is one `transform` for each hexagon, consisting of a `scale`, three rotations in the X and Y axes each, two rotations in the Z axis, and two translations in the X and Y axis each. There is a CSS Keyframe animation that is only modifying the custom properties (CSS Variables) that make up the initial `transform`. So one rotation can be animated independently from the other functions, for example. As an added bonus... one X and one Y rotation are never modified by the keyframe animations (`--rx3` and `--ry3`). They are instead changed via JS when your mouse/finger/pointer moves with Pointer Events. A transition is applied for those two custom properties so everything animating is kept smooth. ___ To be fair, I kinda just like the simple scaling of the base experience, too. I find it soothing.
This Pen uses: HTML, CSS, JavaScript, and