user profile image


  1. Very nice.

  2. A very useful demo. I've done something like this a coupple of years ago: https://codepen.io/enxaneta/pen/ZQbNMx

  3. I was literally thinking about making one of these yesterday. Something very clean and basic like this. Good work.

  4. 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:

    perspective: 26px;
    rotateX: 30deg;
    rotateY: 33deg;
    rotateZ: 73deg;
    transform-origin:center center;  

    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

  5. pretty cool.

  6. 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

  7. 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

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.