HTML / CSS / JavaScript Tutorial

CSS Angles

[this page | pdf | back links]

Some CSS property values are defined in terms of angles. It is used for example in rotate or skew parameters used by the transform property.


Angles can be defined in the following units:





Degrees. One full circle (360°) is 360deg


Gradians. One full circle (360°) is 400deg


Radians. One full circle (360°) is 2p radians, i.e. approximately 6.28318rad


Number of full turns. One full circle (360°) is 1turn. The turn unit is not at the time of writing supported by all major browsers.


Positive angles represent clockwise turns, whilst negative angles represent counter-clockwise turns


Note: as with CSS lengths, no space should be left between the numerical value and unit. Unlike with  CSS lengths, you always need to include a unit, i.e. 0 is not in itself a valid angle, even though 0deg = 0grad = 0rad = 0turn.


Contents | Prev | Next | CSS Properties

Desktop view | Switch to Mobile