Subform/XMLForm

This is so simple, you're going to slap yourself, or someone near you, when you see it.  But before we get into the code, I suppose the best place to start is to describe what you're actually looking at.  This is just HTML and CSS.  Nothing else.  Well, that's not entirely true - on the XMLForm page, there's a bit of JavaScript to cause it to rotate every 5 seconds.  I'll cover that too.  The box itself HTML+CSS.

Download the Box3D package.

Upon Closer Examination

Those who have looked at the source will already know what's going on, at least what elements are involved.  It's 6 divs (one for each face of the box) wrapped in a 7th div which allows us to manipulate the entire 3d object at once, and allows us to apply CSS properties that cascade down to the inner elements.  An 8th (outer) div allows us to move the entire thing around as a block element.

There are a TON of 3d object tutorials on the net.  Dig in, they're everywhere.

To make it a software box shape, I did all of the math necessary to calculate those sizes with CSS.  If you wanted to make a dice shape, you'd remake those calculations to build all 6 sides equal width/height.  I wanted a software box, so this is what I came up with.

You only need to enter a base size, and the CSS calculations will do the rest - resizing each width/height appropriately to achieve the box shape we want.  Also you can enter a border width and color to make the box corners more distinct.  I use this because it makes the boxes look better (in my opinion).

The next settings have to do with each box face, so there are 6 of them.  Only one face shown here.

Finally, the box angle of display settings

Final Result

Nothing special, I left the sides mostly blank to keep the display clean.  You're looking at a few divs and their content - that's all.

Oh yeah - the JavaScript!

Really, I almost forgot.  I was just about to press "Save" when it hit me - you can't see the back of the box.  So, I applied the rotate.js to this page - and here's what rotates the box every 5 seconds.

Remember, the field itself requires no JavaScript.  This is ONLY here to animate box rotation so you can see more than half the sides.

const xmlFormFun = function(){
    const root = this;
    this.target = null;
    this.yStart = null;
    const construct = function() {
        root.target = document.querySelector('.box3d .box');
        root.yStart = root.getY();
        setInterval(()=>{
            let y = root.getY();
            if(y !== root.yStart){
                root.setY(root.yStart);
            } else {
                let newY = Math.abs(y.replace('deg',''))+180;
                root.setY(newY+'deg');
            }
        }
        ,5000);
    }
    this.getY = function(){
        return root.target.style.getPropertyValue('--y-default');
    }   
    this.setY = function(y){
        root.target.style.setProperty('--y-default',y);
    } 
    construct();
}

window.addEventListener('DOMContentLoaded',()=>{
    window.xmlForm3d = new xmlFormFun();
});