CSS transform-origin visualized

Go to Source

See the Code
See it Full Page
See Details

I wanted to visualize how the CSS "transform-origin" property. I bind two INPUT range elements to the X and Y position of the transform-origin, I use web-animation to animate the rotation of the SVG element. I also added dynamic rendering of the current rotation angle using requestAnimationFrame. So a good mix of various front-end patterns 🙂
UPDATED: Now using SMIL if web-animation not supported.

This Pen uses: HTML, CSS, JavaScript, and