CSS Data Type - <angle>

CSS <angle> data type defines an angle value that is measured in degrees, gradians, radians, or turns. This property is used in gradients and some transform functions.

Possible Values

  • <number> − A number can have a positive or negative value.

Syntax

<angle> = number;

Following points need to be taken care of:

  • The <angle> data type includes a <number> followed by one of the following units (as listed in the table).

  • No space is allowed between the unit and the number.

  • It is optional to include the angle unit after the number 0.

  • Angles may be preceded by a single + or - sign, with positive indicating clockwise and negative counterclockwise.

  • Static unit properties can have equivalent angles (e.g., 90deg is equivalent to -270deg), but dynamic properties, such as animations or transitions, the effects may differ.

The following table lists the different units that can be used to measure angles −

unit description
deg It represents an angle measured in degrees between 0 to 360deg. A complete circle is equal to 360deg.
grad It represents an angle measured in gradians between 0 to 400grad. A complete circle is equal to 400grad.
rad It represents an angle measured in radians. A complete circle is equal to 2π radians which is around 6.2832rad.
turn It represents an angle measured in a number of turns. A complete circle is equal to 1turn.

CSS <angle> - deg

The following example demonstrates the property transform: rotate(60deg) rotates the box by 60deg −

<html>
<head>
<style>
   div { 
      height: 100px;
      width: 100px;
      border: 2px solid blue;
      margin: 20px;
      transform: rotate(60deg);
   }
</style>
</head>
<body>
   <div>
      The box rotate by 60deg.
   </div>
</body>
</html>

CSS <angle> - grad

The following example demonstrates the property transform: rotate(-45grad) rotates the box by -45deg −

<html>
<head>
<style>
   div { 
      height: 100px;
      width: 100px;
      border: 2px solid blue;
      margin: 20px;
      transform: rotate(-45grad);
   }
</style>
</head>
<body>
   <div>
      The box rotate by -45grad.
   </div>
</body>
</html>

CSS <angle> - rad

The following example demonstrates the property transform: rotate(3.1416rad) rotates the box by 3.1416rad −

<html>
<head>
<style>
   div { 
      height: 100px;
      width: 100px;
      border: 2px solid blue;
      margin: 20px;
      transform: rotate(3.1416rad);
   }
</style>
</head>
<body>
   <div>
      The box rotate by 3.1416rad.
   </div>
</body>
</html>

CSS <angle> - turn

The following example demonstrates the property transform: rotate(1.75turn) rotates the box by 1.75turn −

<html>
<head>
<style>
   div { 
      height: 100px;
      width: 100px;
      border: 2px solid blue;
      margin: 20px;
      transform: rotate(1.75turn);
   }
</style>
</head>
<body>
   <div>
      The box rotate by 1.75turn.
   </div>
</body>
</html>
Advertisements