This demo was found on the web and modified to demonstrate how to solve for multiple of the control as displayed in the original demo. The code for both is included here.
The problem with the original demo is that it does not scale well: ie easily let you add more container cube objects that have the same behavior. If we need two cubes, or n cubes, how do we do it? The beauty of this demo is how simple Mr. Rahman makes it to put whatever we want as the content of the cubeface.
Given how easy it was to populate the faces of the cube, the numbers that had been on them are now replaced by various images.
After some effort and investigation of how to add more 'dice', the demo here was modified from the original. If you open the source of this page you can see the code. If you don't know what that means you probably have some things you can start to learn if that is your thing. Now we can add cubes without limit. That is probably dangerous. Well, how could it be? The new code here allows for unlimited amounts of these modifiable cube objects on a page. And so this page, as a demo, contains more of the cube objects than the original demo. These are each tied to the same call back in this demo. (except for the first, for which I retain Mr. Rahman's code. The next step would be to have a bunch of different cubes, up to some max_cubes value (to prevent a stack overrun). And then to have the groups of 6 images (or most likely, in this kind of an interface) n images per cube or entity (it doesn't have to be a cube). The entity with the n surfaces could be used as a digit spin control. Spin controls mimic the realworld digits of a clock that has the number of spinning wheels. This allows any digit to be a modification point. That allows for easy use of the control without a keyboard. It mimmics the way a physical control like this would be used in the real world, like for selecting a temperature or a date value.
There are a lot of uses for such behaviors, and it doesn't have to be just cubes, but any n-sided object. It might be a wheel-like design, a hub, or a multifaceted 'gem' shape that could be used. The possibilities are only limited by what one can think up.
this demo originated from Advanced CSS3 2D and 3D Transform Techniques and was titled in a header element as Extreme CSS
By Syed Fazle Rahman | January 16, 2013
This demo was significantly enhanced by effort at APC, which is posting this page to demonstrate the techniques and the efforts. These added parts are copyright Amillia Publishing Company. Nothing of Mr. Rahman's work is claimed here and no copyright applies to those parts of this page, it's code, or it's makeup. Free to use as far as it seems to me.
© 2010, 2012 2013 Amillia Publishing Company. Parts of this page are in the public domain and are attributible to Syed Fazle Rahman as noted elsewhere on this page. Please respect proper copyright edicates and disrespect no person.
