Open In App

CSS Value | Angle

Improve
Improve
Like Article
Like
Save
Share
Report

The angle on CSS represents a certain angle value that can be expressed in degrees, gradians, radians, or turns. Angle value can be used for rotations, transformations or gradients, etc.

Syntax: The angle consists of a number followed by one of the allowed units.

property: number unit;

Allowed units:

  • deg: Represents an angle in degrees. One full circle is 360deg. Examples: 0deg, 90deg.
  • grad: Represents an angle in gradians. One full circle is 400grad. Examples: 0grad, 38.8grad.
  • rad: Represents an angle in radians. One full circle is 2Ï€ radians which approximate to 6.2832rad. 1rad is 180/Ï€ degrees. Examples: 0rad, 1.07rad.
  • turn: Represents an angle in a number of turns. One full circle is 1turn. Examples: 0turn, 1.2turn.

Example 1: using the deg unit to rotate an element by 90 degrees.

html




<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
  <title>CSS | value angle</title>
</head>
<style>
    div{
      transform: rotate(90deg);
      }
</style>
<body>
    <h1 style="text-align: center; color: green;">GeeksforGeeks</h1>
    <div style="width: 100px; height: 200px;
         margin-left: 46vw; background: green;">
    </div>
</body>
</html>


Output:

Example 2: using the rad unit to rotate an element.

html




<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
  <title>CSS | value angle</title>
</head>
<style>
    div{
      transform: rotate(2rad);
    }
</style>
<body>
    <h1 style="text-align: center; color: green;">GeeksforGeeks</h1>
    <div style="width: 100px; height: 200px;
         margin-left: 46vw; background: green;">
    </div>
</body>
</html>


Output:

Example 3: using the grad unit to rotate an element.

html




<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
  <title>CSS | value angle</title>
</head>
<style>
    div{
      transform: rotate(10grad);
    }
</style>
<body>
    <h1 style="text-align: center; color: green;">
        GeeksforGeeks
    </h1>
    <div style="width: 100px; height: 200px;
         margin-left: 46vw; background: green;">
    </div>
</body>
</html>


Output:

Example 4: using the turn unit to rotate an element.

html




<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
  <title>CSS | value angle</title>
</head>
<style>
    div{
      transform: rotate(1.25turn);
    }
</style>
<body>
    <h1 style="text-align: center; color: green;">
           GeeksforGeeks</h1>
    <div style="width: 100px; height: 200px;
         margin-left: 46vw; background: green;">
    </div>
</body>
</html>


Output:

Supported Browsers:

  • Chrome 2
  • Edge 12
  • Firefox 3.6
  • Opera 15
  • Safari 4


Last Updated : 24 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads