See the Code - See it Full Page - See Details
Full demo in latest Chrome, Opera, and Safari (Firefox does not like `calc` in all the places I'm using it... same for Edge (and it is also new to the Variables)). Bonus fuller demo in Safari Technical Preview with CSS Spring Animations flag enabled. More custom properties, more spinning, more transforms. Non interactive state has spinning squares making patterns based on their varying scales and rotation amounts. Pressing on the screen causes each square to expand out in three dimensions, each dimension with varying easings... and each easing having custom properties defining each of the four parts of a cubic-bezier. Each transform and each transition has multiple custom properties and multiple instance of calc.
This Pen uses: HTML, CSS, JavaScript, and