css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image


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

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

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

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

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