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;
- 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.
Example 2: using the rad unit to rotate an element.
Example 3: using the grad unit to rotate an element.
Example 4: using the turn unit to rotate an element.
- Angle Bracket <> in Java with Examples
- Fabric.js | Rect angle Property
- Fabric.js | Triangle angle Property
- Fabric.js | Image angle Property
- D3.js lineRadial.angle() Method
- D3.js areaRadial.angle() Method
- How to override the CSS properties of a class using another CSS class ?
- Difference between bootstrap.css and bootstrap-theme.css
- CSS | Percentage Value
- CSS | [attribute$=value] Selector
- CSS | [attribute=value] Selector
- CSS | [attribute*=value] Selector
- CSS | [attribute|=value] Selector
- CSS | [attribute~=value] Selector
- CSS | [attribute^=value] Selector
- CSS Value Resolution
- CSS | Value Integer
- CSS Value Inherit
- CSS Value | Unset
- CSS Value | Initial
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.