controllerBox


box(x_size, y_size, z_size)

box.messages = [update]
box.events   = []

Description

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.

Parameters

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():

update: 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

Transforms: Applies one rotate and one translate transform on each of the 6 sides.
CSS: The element has its width and height CSS properties set. Each of the 6 sides' elements has its position (set to absolute), width and height CSS properties set.
Events: Does not set event listeners.

Changes Log

Controller introduced in v.0.80