How can I graphically represent width, height and depth dimensions?


I want this but so it adjusts to sizes entered in a form on a webpage in fairly normal HTML/CSS:

enter image description here

Way back in the 1990's you could show the proportions of a box in 3D using VRML and have the controls adjustable with nice sliders/text entry fields. It also would not take all day to work out. The box could be lit and you could see it in perfect 3D at any angle.

A decade on and I am stumped as to how best to represent a simple box with relative proportions. I want something that will work in all browsers.

How hard can a box be?

6/3/2011 12:06:00 PM

Unfortunately there's no way to accomplish this with just HTML and CSS. Pretty much all interactivity on a webpage other than links requires writing code in JavaScript.

Now if you are willing/able to dive into a bit of programming, the 3D aspect of things makes the problem slightly (but not enormously) more complex. If you only had to adjust the width and height (ie. 2D) then it would be almost trivial to program, but adjusting depth in the image makes things more complicated.

You will probably want to draw the box in code using an API with line drawing commands, like Processing.js

6/13/2011 4:42:00 PM