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>
To Continue Learning Please Login
Login with Google