CSS rotate()

The CSS rotate() function rotates an element around a fixed point by a specified angle. This rotation can either be clockwise or anticlockwise and is commonly used in animations, UI interactions, or creative web layouts.

CSS rotate() Syntax

transform: rotate(angle);

Parameters:

• angle: Defines the degree of rotation. It accepts values in degrees (deg), radians (rad), gradians (grad), or turns (turn).
  • Positive values = Clockwise rotation
  • Negative values = Anticlockwise rotation

Example 1: Basic Rotation in CSS Using rotate()

In this example, the .box element is rotated 45 degrees clockwise from its original position using CSS rotate(), creating a diamond-like appearance:

.box {
  width: 100px;
  height: 100px;
  background-color: coral;
  transform: rotate(45deg);
  margin: 50px;
}

Copy to clipboard
Copy to clipboard

Here is the output:

Example 2: Using rotate() to Rotate on Hover

When a user hovers on the .box element, it rotates 90 degrees, thanks to the smooth transition defined in the CSS:

.box {
  width: 100px;
  height: 100px;
  background-color: mediumseagreen;
  transition: transform 0.3s ease-in-out;
  margin: 50px;
}

.box:hover {
  transform: rotate(90deg);
}

Copy to clipboard
Copy to clipboard

Here is the output:

Example 3: Continuous Rotation in CSS With the Help of rotate()

This example creates a spinning loader by continuously rotating a styled circle using a CSS animation:

.box {
  width: 80px;
  height: 80px;
  margin: 50px;
  border: 5px solid lightgray;
  border-top: 5px solid steelblue;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Copy to clipboard
Copy to clipboard

Here is the output:

Frequently Asked Questions

1. Does CSS rotate() affect layout or just visual appearance?

CSS rotate() is part of the transform property and only affects visual appearance. It doesn’t change the element’s position in the document flow.

2. Can I combine CSS rotate() with other transform functions?

Absolutely. You can combine CSS rotate() with other transform functions by separating them with a space:

transform: scale(1.2) rotate(30deg) translateX(20px);

Copy to clipboard
Copy to clipboard

3. Is CSS rotate() supported across all browsers?

Yes. Modern browsers like Chrome, Firefox, Safari, Edge, and even Internet Explorer 9+ support CSS rotate().

4. How to rotate 45 degrees in CSS?

Here’s how you can use CSS rotate() to rotate 45 degrees:

transform: rotate(45deg);

Copy to clipboard
Copy to clipboard