The CSS `transform` property can rotate an image by a specified angle.

A positive angle creates a clockwise rotation. A negative value creates an anti-clockwise rotation.

There exist two types of rotations, the 2D and 3D rotations. In this tutorial, you’ll learn about both types with a simple hands-on example.

## The 2D rotations

The CSS property,`transform` creates the 2D rotations with help of a CSS function,`rotate()`.

The browser rotates an object to a specified angle in a two-dimensional plane. A two-dimensional plane has two dimensions, horizontal (X) and vertical (Y) dimensions.

### The Syntax

The general syntax of the CSS property, `transform` to rotate an image using a CSS function, `rotate( )`.

``````transform: rotate(angle);
``````

The CSS `rotate()` function helps to specify a transformation that rotates an image. This function accepts the rotation angle as a mandatory parameter.

## The 3D rotation

A 3D rotation considers the depth dimension (Z) too along with other dimensions. Thus, you need to specify the axis of the rotation too along with the angle.

You can use functions, `rotateX()`, `rotateY(),`and `rotateZ()`for 3D rotations.

### The syntax and descriptions

The syntax of functions `rotateX()`, `rotateY(),`and `rotateZ()` are as follows -

``````transform: rotateX(angle); // Rotates along with X axis to a specified angle
transform: rotateY(angle); // Rotates along with Y axis to a specified angle
transform: rotateZ(angle); // Rotates along with Z axis to a specified angle

``````

### Few Extra Information for the 3D rotation

The CSS function, `rotate3d()` allows you to specify both the axis and angle for a 3D rotation in a single function. Here comes the general syntax of the function

``````tranform: rotate3d(X,Y,Z,angle);
``````

The parameters for this function are as follows

• `X, Y, Z` - Holds the coordinates of vector for rotation. These parameters can have a value within the range of 0 to 1.
• `angle` - Specifies the rotation angle.

## A Coding Sample

Here comes a simple and easy-to-follow coding sample that rotates images. You can write or copy the below HTML source code in your HTML file, `index.html`

``````<!DOCTYPE html>
<html lang="en">

<title>A Sample Web Page</title>

<body>
<img src="/photo-1.jpg" alt="Image 1" class="img1">
<img src="/photo-1.jpg" alt="Image 1" class="img2">
<img src="/photo-1.jpg" alt="Image 1" class="img3">
<img src="/photo-1.jpg" alt="Image 1" class="img4">
<img src="/photo-1.jpg" alt="Image 1" class="img5">
<img src="/photo-1.jpg" alt="Image 1" class="img6">
</body>

</html>
``````

Your CSS file, `style.css` should have below source code

``````.img1 {
transform: rotate(90deg);
}
.img2 {
transform: rotate(-90deg);
}
.img3 {
transform: rotateX(45deg);
}
.img4 {
transform: rotateY(-45deg);
}
.img5 {
transform: rotateZ(90deg);
}
.img6 {
transform: rotate3d(1, 1, 0, 60deg);
}
``````

The above example uses a single image to perform both the 2D and 3D examples. It used all `rotate()` functions we have learned so far in this tutorial.

You can try with more values to gain more clarity on how they work to rotate an image.

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript