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">

<head>
	<title>A Sample Web Page</title>
	<link rel="stylesheet" href="style.css">
</head>

<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