controllerBox
box(x_size, y_size, z_size)
box.messages = [update]
box.events = []
Description
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 onetranslate
transform on each of the 6 sides. - CSS: The element has its
width
andheight
CSS properties set. Each of the 6 sides' elements has itsposition
(set toabsolute
),width
andheight
CSS properties set. - Events: Does not set event listeners.
Changes Log
- Controller introduced in v.0.80