---
title: "Transform properties"
date: "2017-11-11T13:11:42+00:00"
summary: "Master element transformations with our comprehensive guide to transform properties. Learn to manipulate rotation, translation, scale, skew, and origin across X, Y, and Z axes for precise control over your design elements."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/transform-properties"
id: "98e3177d-9281-4331-b331-4e893a3eab5a"
---

Table of contents will be added

Set the X,Y and Z rotation, X, Y and Z translation, X and Y scale, X and Y skew and X and Y origin to transform an element's shape.

X-rotate
--------

Set the rotation of the element on the x-axis. 

### Expected value:

*   Enter a number. This will be interpreted as degrees

### Accepted units:

*   **Blank -** The value will be interpreted as deg

Y-rotate
--------

Set the rotation of the element on the y-axis. 

### Expected value:

*   Enter a number. This will be interpreted as degrees

### Accepted units:

*   **Blank -** The value will be interpreted as deg

Z-rotate
--------

Set the rotation of the element on the z-axis. 

### Expected value:

*   Enter a number. This will be interpreted as degrees

### Accepted units:

*   **Blank -** The value will be interpreted as deg

X-translate
-----------

Move the element on the x-axis. Positive numbers move the element down. Negative numbers move the element up.

### Expected value:

*   Enter a number
*   Negative numbers are accepted

### Accepted units:

*   **Blank -** The value will be interpreted as px

Y-translate
-----------

Move the element on the y-axis. Positive numbers move the element right. Negative numbers move the element left.

### Expected value:

*   Enter a number
*   Negative numbers are accepted

### Accepted units:

*   **Blank -** The value will be interpreted as px

Z-translate
-----------

Move the element on the z-axis. Positive numbers move the element away from the viewer (Element appears smaller). Negative numbers move the element towards the viewer (Element appears bigger)

### Expected value:

*   Enter a number
*   Negative numbers are accepted

### Accepted units:

*   **Blank -** The value will be interpreted as px

X-scale
-------

Scale the element on the x-axis. Positive numbers make the element wider.

### Expected value:

*   Enter a number

### Accepted units:

*   **Blank -** The value will be interpreted as px

Y-scale
-------

Scale the element on the y-axis. Positive numbers make the element taller.

### Expected value:

*   Enter a number

### Accepted units:

*   **Blank -** The value will be interpreted as px

X-skew
------

Skew the element on the x-axis in degrees.

### Expected value:

*   Enter a number

### Accepted units:

*   **Blank -** The value will be interpreted as deg

Y-skew
------

Skew the element on the y-axis in degrees.

### Expected value:

*   Enter a number

### Accepted units:

*   **Blank -** The value will be interpreted as deg

X-origin
--------

Set the position the element is transformed from on the x-axis. Default value is 50%. This is equivalent to centre.

### Expected value:

*   Enter a number - This will be interpreted as px
*   Enter a string
    *   Left
    *   Centre
    *   Right

### Accepted units:

*   **Blank -** The value will be interpreted as px
*   **%** - The values will be applied as a percentage of the element's width. 50% is centre

Y-origin
--------

Set the position the element is transformed from on the y-axis. Default value is 50%. This is equivalent to centre.

### Expected value:

*   Enter a number - This will be interpreted as px
*   Enter a string
    *   Top
    *   Centre
    *   Bottom

### Accepted units:

*   **Blank -** The value will be interpreted as px
*   **%** - The values will be applied as a percentage of the element's height. 50% is centre