controllerTransform
transform(dx, dy, dz,
sx, sy, sz,
rx, ry, rz, ra,
flatten)
transform.messages = []
transform.events = []
Description
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(
if any of these 3 parameters is of value different thandx
,dy
,dz
)0
.
Default values: 0, 0, 0 - sx, sy, sz
-
The controller will apply a transform
scale3d(
if any of these 3 parameters is of value different thansx
,sy
,sz
)1
.
Default values: 1, 1, 1 - ra
-
Amount of rotation (in degrees) for a
rotate
transform. If this parameter is of value different than0
then the controller will apply a transformrotate3d(
. Default values: 0rx
,ry
,rz
,ra
) - 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'stransform-style
CSS property will be set toflat
instead of the defaultpreserve-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
(ifdx
,dy
ordz
is different than0
), onescale
(ifsx
,sy
orsz
is different than1
), and onerotate
(ifra
is different than0
) 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