Application Launcher

Site Studio

Transform and transition properties

Site Studio

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:

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

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
Scale the element on the X-axis

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 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.

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.

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

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.

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.

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.