CSS rotate Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 21 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The rotate property in CSS is used to rotate elements in a two-dimensional space. This transformation is part of the CSS Transforms module and allows you to rotate elements by a specified angle.

This property is particularly useful for creating dynamic and visually interesting web designs.

💡 Syntax

The syntax for the rotate property is straightforward. It can be applied to any element, and you can specify the angle of rotation using degrees, gradians, radians, or turns.

Syntax

Copied

element {
  transform: rotate(angle);
}

Here, angle can be a value in degrees (deg), gradians (grad), radians (rad), or turns (turn).

🎛️ Default Value

The default value of the rotate property is 0deg, which means no rotation is applied.

🏠 Property Values

Value	Description
degrees	A value in degrees, such as 45deg, 90deg, etc.
gradians	A value in gradians, such as 50grad.
radians	A value in radians, such as 0.5rad.
turns	A value in turns, such as 0.25turn.

📄 Example

In this example, we'll rotate a square div by 45 degrees.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS rotate Example</title>
  <style>
    .rotate-box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      transform: rotate(45deg);
    }
  </style>
</head>
<body>
  <h1>Div with Rotate Transformation</h1>
  <div class="rotate-box"></div>
</body>
</html>

🖥️ Browser Compatibility

The rotate property is supported in all modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The rotate property is a powerful tool for web developers looking to add dynamic transformations to their elements.

By rotating elements, you can create engaging and visually appealing designs. Experiment with different angles and see how this property can enhance the look and feel of your web projects.