---
title: "I want to rotate an element. Do I use the X, Y or Z rotate property?"
date: "2017-11-06T11:23:43+00:00"
summary: "Learn how to rotate elements using CSS transform properties. Discover when to use X, Y, or Z rotation for different effects, with step-by-step instructions for applying rotations in your web designs."
image:
type: "article"
url: "/drupal-starter-kits/add-ons/site-studio/help/64816-i-want-rotate-element-do-i-use-x-y-or-z-rotate-property"
id: "90fa5895-91ef-44a8-9306-6cb38c48b21c"
---

If you’re trying to rotate the element front on, use the Z rotate property.

The Z rotate property will rotate the element clockwise or anti-clockwise. To apply it to an element, first navigate to the Style builder. Then:

1.  Navigate to Properties > Transform and Transition > **Transform**
2.  Within the **Z rotate** field
3.  **Enter a number**. This will be interpreted as degrees
4.  Positive numbers will rotate the element clockwise, negative numbers will rotate the element anti-clockwise.

Read more about it and try using it here: [https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateZ](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateZ)