Rotation

A layer’s rotation is defined in degrees between 0 and 360.

# A rotated layer
layer = new Layer
    size: 300
    borderRadius: 30
    backgroundColor: "#7DDD11"
    point: Align.center
    rotation: 45

You can use values higher than 360º in animations. This layer, for instance, gets rotated to 720º (360 x 2):

# After a delay of one second the layer will
# rotate to 720º in 3 seconds’ time.
layer.animate
    rotation: 360*2
    options:
        delay: 1
        time: 3

Note that the layer does not ‘rotate 720º’ but ‘rotates to 720º’. It was already turned 45º, so it ended up rotating 720 – 45 = 675 degrees, clockwise.

How do you rotate counter-clockwise? Simple: negative values.
Try -360*2.

3D rotation

The rotation property is an alias for rotationZ, because you’re actually rotating around the z-axis which goes through the layer.

With the properties for the other two axes, rotationX and rotationY, you can rotate in 3D space. You will also see perspective applied when you rotate around these axes.

Here’s an example that combines z-axis and y-axis rotation:

# rotate around the Z axis
purpleSquare.animate
    rotation: 360
# and also around the Y axis
purpleSquare.animate
    rotationY: 360

Transform origin

A layer will rotate around its center because that’s the default ‘origin’ for its ‘transformations.’ It will also grow or shrink from this point when you change its scale. This ‘transform origin’ is sometimes also called the ‘anchor point.’

You can place this origin somewhere else, though. A higher originX will place it more to the right, and a higher originY will place it closer to the bottom of the layer. Both values can be between 0 and 1, so by default they’re in the middle: 0.5.

This can be confusing, but the project below will hopefully make it more understandable. In it, you can change these properties and see the result.