CSS atan2() Function
Example
Use atan2() to rotate elements:
div.a {
transform: rotate(atan2(50, 100));
}
div.b {
transform: rotate(atan2(30px, -3rem));
}
div.c {
transform: rotate(atan2(40%, 75%));
}
div.d {
transform:
rotate(atan2(pi, 25));
}
Try it Yourself »
Definition and Usage
The CSS atan2() function the inverse tangent of
two values between -infinity and infinity.
The values can be a number, a dimension, or a percentage. Both values must be of the same type.
This function returns an angle between -180 and 180 degrees.
| Version: | CSS4 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| atan2() | 111 | 111 | 108 | 15.4 | 97 |
CSS Syntax
atan2(y, x)
| Value | Description |
|---|---|
| y | Required. The y-coordinate. Can be a number, a dimension, or a percentage |
| x | Required. The x-coordinate. Can be a number, a dimension, or a percentage |
Related Pages
CSS reference: CSS acos() function.
CSS reference: CSS asin() function.
CSS reference: CSS atan() function.
CSS reference: CSS calc() function.
CSS reference: CSS cos() function.
