atan2()
Baseline 2023Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The atan2()
CSS function is a trigonometric function that returns the inverse tangent of two values between -infinity
and infinity
. The function accepts two arguments and returns the number of radians representing an
between -180deg
and 180deg
.
Syntax
css
/* Two values */
transform: rotate(atan2(3, 2));
/* Two values */
transform: rotate(atan2(1rem, -0.5rem));
/* Two values */
transform: rotate(atan2(20%, -30%));
/* Other values */
transform: rotate(atan2(pi, 45));
transform: rotate(atan2(e, 30));
Parameters
Return value
Formal syntax
Examples
Rotate elements
The atan2()
function can be used to rotate
elements as it return an
.
HTML
html
CSS
css
div.box {
width: 100px;
height: 100px;
background: linear-gradient(orange, red);
}
div.box-1 {
transform: rotate(atan2(3, 2));
}
div.box-2 {
transform: rotate(atan2(3%, -2%));
}
div.box-3 {
transform: rotate(atan2(-1, 0.5));
}
div.box-4 {
transform: rotate(atan2(1, 0.5));
}
div.box-5 {
transform: rotate(atan2(1rem, -0.5rem));
}
Result
Specifications
Specification |
---|
CSS Values and Units Module Level 4 # trig-funcs |