# CSS rotate() Function – How to Rotate Elements in CSS

rotate() transforms an element by rotating it two-dimensionally around a fixed point.

note
• "Transform origin" is the fixed point around which an element rotates.
• You can define your element's fixed point using the CSS transform-origin property. But the default is center.

## Syntax of the CSS rotate() Function​

rotate() accepts a single argument. Here is the syntax:

element {  transform: rotate(angle);}

Note the following:

• The rotate(angle) function is equivalent to rotate3d(0, 0, 1, angle) or rotateZ(angle).
• The angle argument specifies the element's angle of rotation.
• angle can be in degrees, gradians, radians, or turns.
• An angle argument consists of a number followed by the unit you wish to use—for instance, 45deg.
• Your browser's writing direction determines the element's direction of rotation.
• A positive angle will rotate the element clockwise in a left-to-right writing direction. But a negative angle will do a counterclockwise rotation.
• A positive angle will rotate the element counterclockwise in a right-to-left writing context. But a negative angle will do a clockwise rotation.

## Examples of the CSS rotate() Function​

Below are some examples of how the CSS rotate() function works.

### How to do a zero-degree rotation in CSS​

img {  transform: rotate(0deg);  width: 80%;}

Try Editing It

The snippet above used the rotate() function to specify a zero-degree (0⁰) rotation for the image element.

### How to do a 45-degree rotation in CSS​

img {  transform: rotate(45deg);  width: 80%;}

Try Editing It

The snippet above used the rotate() function to specify a forty-five-degree (45⁰) rotation for the image element.

## Express Your Love for Coding!

Explore CodeSweetly's Shop for an array of stylish products to enhance your coding experience.

### How to do a negative seventy-degree rotation in CSS​

img {  transform: rotate(-70deg);  width: 80%;}

Try Editing It

The snippet above used the rotate() function to specify a negative seventy-degree (70⁰) rotation for the image element.

## CSS rotate() Function vs. rotate Property: What's the Difference?​

CSS rotate() functions and CSS rotate property provide two similar ways to specify rotation transformations.

The main differences between the two rotation techniques are as follows:

• The CSS rotate property allows rotating an element without using the CSS transform property.
• The CSS rotate property's syntax is shorter than its function alternative.
• The CSS rotate property saves you from remembering the specific order to position the transform functions.
• Browsers calculate the transform functions' matrix in the order you assigned them to the CSS transform property—from left to right.
• Browsers calculate the transform properties' matrix in the following transformation matrix order:
1. translate
2. rotate
3. scale

Here's an example:

Use CSS rotate property to do a 45-degree rotation:

img {  rotate: 45deg; /* Equivalent to a transform: rotate(45deg) property */  width: 80%;}

Try Editing It

The snippet above used the rotate property to specify a forty-five-degree (45⁰) rotation for the image element.

note

A none value tells browsers not to rotate the selected element.

## Overview​

This article discussed what a CSS rotate() function is. We also used examples to see how it works.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.