controllerTwoSides


twoSides(thickness, flip_x)

twoSides.messages = [update]
twoSides.events   = []

Description

Side 1

Side 2

Takes the first 2 child nodes of the element and transforms them into the front and back sides of a 3D plane. The element representing the back side is rotated in 180 degrees horizontally or vertically (set by parameter flip_x), depending on how you want the back face oriented. The two sides can have space between them, set by parameter thickness. The transforms origin of the resulting plane is, by default, in its top-left corner when looking at the front side.

Applies one rotate transform on the back side's element and one translate transform on each of the 2 sides if thickness is non-zero.

Parameters

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

Parameters of twoSides():

thickness: Size in pixels of the space between the front and back sides. Default value: 0
flip_x: Tells how the back side is constructed from its starting position in the layout - by rotating it 180 degrees around the Y axis (default), or by rotating it around the X axis (when flip_x is true). Default value: false

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

update: When you want to swap one or both of the 2 sides' HTML elements, rearrange the DOM nodes and then send this message to the controller to make it take again the first 2 child nodes as sides of the plane. 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 twoSides(): none

Interaction with DOM

Transforms: Applies one rotate on the back side' element and one translate transform on each of the 2 sides if thickness is non-zero.
CSS: Both sides' elements have the following CSS properties set: position (set to absolute) and backface-visibility (set to hidden).
Events: Does not set event listeners.

Changes Log

Controller introduced in v.0.80