controllerTransform


transform(dx, dy, dz,
          sx, sy, sz,
          rx, ry, rz, ra,
          flatten)

transform.messages = []
transform.events   = []

Description

element

Applies a translate, scale and/or rotate transform depending on if parameters for any of the transforms are supplied.

If parameter flatten is set (to true), then the element's transform-style CSS property will be set to flat instead of the default preserve-3d.

Note that the controller itself does not animate/transition in any way the supplied values, it only dumps its parameters to the 3 transforms. You can animate the parameters externally by changinging their values often or, if you want a smooth-running animation, set a callback for the controller's frame event, which will be called on every drawing frame (see the examples below). Setting a callback on this controller's frame event is the easiest way to implement animations with your own logics.

Parameters

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

Coordinate/Size Parameters: Note that all parameters representing screen coordinates or sizes also accept relative values as percentages of own/parent/viewport/document size or coordinates relative to own/parent/viewport/document's origin. For more information, visit page Controller # Coordinate Parameters.

Parameters of transform():

dx, dy, dz: The controller will apply a CSS transform translate3d(dx, dy, dz) if any of these 3 parameters is of value different than 0.
Default values: 0, 0, 0
sx, sy, sz: The controller will apply a transform scale3d(sx, sy, sz) if any of these 3 parameters is of value different than 1.
Default values: 1, 1, 1
ra: Amount of rotation (in degrees) for a rotate transform. If this parameter is of value different than 0 then the controller will apply a transform rotate3d(rx, ry, rz, ra). Default values: 0
rx, ry, rz: Components of a 3D vector giving the orientation of rotation. Since the vector is normalized, the absolute values of the components are not important, only the relations between them are. This vector supplies only the orientation of the rotation. The amount of rotation is supplied by the parameter ra Default values: 0, 0, 0
flatten: If set (to true), then the element's transform-style CSS property will be set to flat instead of the default preserve-3d. 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 specific to transform(): 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 transform(): none

Interaction with DOM

Transforms: Applies one translate (if dx, dy or dz is different than 0), one scale (if sx, sy or sz is different than 1), and one rotate (if ra is different than 0) transforms.
CSS: Works with any styling. Does not set any style properties.
Events: Does not set event listeners.

Changes Log

Controller introduced in v.0.80