Transform and transition properties

Transform properties allow you to transform the shape of an element. Transition properties allow you to specify how an element transitions between two states.

Adding transform and transition properties to a style

To add Transform and transition properties to a style:

1. Navigate to the Style builder. This is available when you edit Base styles or Custom styles. For more, see Using the style builder
2. Within the Style editor area, click on the Properties button
3. Then select Transform and transition > (Select a Transform and transition sub-group) in the menu.

The Transform and transition properties include the following groups of fields:

Transform

• X rotate - Rotate the element on its X-axis
• Y rotate - Rotate the element on its Y-axis
• Z rotate - Rotate the element on its Z-axis
• X translate - Move the element on the X-axis
• Y translate - Move the element on the Y-axis
• X scale - Scale the element on the X-axis
• Y scale - Scale the element on the Y-axis
• X skew - Skew the element on the X-axis
• Y skew - Skew the element on the Y-axis
• X origin - Set where the element is placed on the X-axis
• Y origin - Set where the element is placed on the Y-axis

For details of each property, see Transform properties.

Transition

• Type - Set what the transition will be applied to
• Duration (ms) - Set how long the transition will take
• Delay (ms) - Set a delay before the transition starts
• Easing - Set the transition easing

For details of each property, see Transition properties.