box(x_size, y_size, z_size) box.messages = [update] = []


Side 1
Side 2
Side 3
Side 4
Side 5
Side 6

Takes the first 6 child nodes of the element and transforms them (set size + rotate + translate) into sides of a 3D rectangular box. The transforms origin of the resulting box is, by default, in its top-left corner when looking at the front side of the box (i.e. without any transforms).

Applies one rotate and one translate transform on each of the 6 side elements.

Note that for the sides of the box to be correctly positioned, if any of the 6 child elements have padding different than zero, set their CSS property box-sizing to border-box.


Visit page Controller # Common Parameters for documentation on the parameters, common to all controllers: id, paused and disabled.

Parameters of box():

x_size, y_size, z_size
Size in pixels of the box's dimensions. These can be modified on the fly. Default values: "100%o", "100%o", "30%oX"

Accepted Messages

Visit page Controller # Common Messages for documentation on the messages, accepted by all controllers: pause, unpause, enable, disable, params and remove.

Messages accepted by box():

When you want to change any of the 6 sides' HTML elements, rearage the DOM nodes and then send this message to the controller to make it take again the first 6 child nodes as sides of the box. Message params: none

Generated Events

Visit page Controller # Common Events for documentation on the events, generated by all controllers: frame, remove, paused, unpaused enabled and disabled.

Events specific to box(): none

Interaction with DOM

Changes Log

  1. Controller introduced in v.0.80

See Also