A very useful demo. I've done something like this a coupple of years ago: https://codepen.io/enxaneta/pen/ZQbNMx
I was literally thinking about making one of these yesterday. Something very clean and basic like this. Good work.
Cool demo, except ☞ currently it's possible to extend the CSS shape over the UI controls (section.settings in the DOM tree). This renders a state in which the user cannot get out of without refreshing the page, which less than optimal. For example, to re-create the bug, try the follow settings in your demo's UI:
The pink square now covers the sliders and cannot be moved because of this.
The fix is simple ☞ z-index.
In your CSS, around line 43, give section.settings z-index: 2, and… ta-da. Here's a forked pen of it: https://codepen.io/danwarfel/pen/BwEwLy
Thanks a lot :) I was trying to make an animation yesterday but had trouble figuring out the rotate-transforms.
Today I saw this pen and was able to make this pen
This Pen is awesome! Bookmarjed it.
Can I make a suggestion that you make it so it's possible to edit the values by typing them in? Using the range slider can be a bit finicky when trying precise values
Need to know how to enable it? Go here.