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:

• Navigate to the Style builder. This is available when you edit Base styles or Custom styles. For more, see Using the style builder
• Within the Style editor area, click on the Properties button
• 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.