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
Share your thoughts in the comments
Please Login to comment...