---
title: "Transform and transition properties"
date: "2017-11-11T13:09:27+00:00"
summary: "Enhance your web design skills with Site Studio's transform and transition properties. Learn how to apply dynamic visual effects and smooth state changes to your elements, creating engaging and interactive user experiences."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/transform-and-transition-properties"
id: "4bf85ca2-1cb5-4a2a-ae3f-915533f9f1b4"
---

Table of contents will be added

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](/drupal-starter-kits/add-ons/site-studio/creating-base-styles "Creating base styles") or [Custom styles](/drupal-starter-kits/add-ons/site-studio/creating-custom-styles "Creating custom styles"). For more, see [Using the style builder](/drupal-starter-kits/add-ons/site-studio/using-style-builder "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.](/drupal-starter-kits/add-ons/site-studio/transform-properties "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.](/drupal-starter-kits/add-ons/site-studio/transition-properties "Transition properties")