This is a series! It began a couple of articles ago when we discovered that, according to the State of CSS 2025 survey, trigonometric functions were the “Most Hated” CSS feature.
I’ve been trying to change that perspective, showcasing several uses for trigonometric functions in CSS: one for sin() and cos() and another on tan(). However, that’s only half of what trigonometric functions can do. So today, we’ll explore the inverse world of trigonometric functions: asin(), acos(), atan() and atan2().
CSS Trigonometric Functions: The “Most Hated” CSS Feature
1. sin() and cos()
2. tan()
3. asin(), acos(), atan() and atan2() (You are here!)
Inverse functions?
Recapping, given an angle, the sin(), cos() and tan() functions return a ratio presenting the sine, cosine, and tangent of that angle, respectively. And if you read the last two parts of the series, you already know what each of those quantities represents.
What if we wanted to go the other way around? If we have a ratio that represents the sine, cosine or tangent of an angle, how can we get the original angle? This is where inverse trigonometric functions come in! Each inverse function asks what the necessary angle is to get a given value for a specific trigonometric function; in other words, it undoes the original trigonometric function. So…
– acos() is the inverse of cos(),
– asin() is the inverse of sin(), and
– atan() and atan2() are the inverse of tan().
They are also called “arcus” functions and written as arcos(), arcsin() and arctan() in most places. This is because, in a circle, each angle corresponds to an arc in the circumference.
The length of this arc is the angle times the circle’s radius. Since trigonometric functions live in a unit circle, where the radius is equal to 1, the arc length is also the angle, expressed in radians.
Their mathy definitions are a little boring, to say the least, but they are straightforward:
– y = acos(x) such that x = cos(y)
– y = asin(x) such that x = sin(y)
– y = atan(x) such that x = tan(y)
acos() and asin()
Using acos() and asin(), we can undo cos(θ) and sin(θ) to get the starting angle, θ. However, if we try to graph them, we’ll notice something odd:
The functions are only defined from -1 to 1!
Remember, cos() and sin() can take any angle, but they will always return a number between -1 and 1. For example, both cos(90°) and cos(270°) (not to mention others) return 0, so which value should acos(0) return? To answer this, both acos() and asin() have their domain (their input) and range (their output) restricted:
– acos() can only take numbers between -1 and 1 and return angles between 0° and 180°.
– asin() can only take numbers between -1 and 1 and return angles between -90° and 90°.
This limits a lot of the situations where we can use acos() and asin(), since something like asin(1.2) doesn’t work in CSS* — according to the spec, going outside acos() and asin() domain returns NaN — which leads us to our next inverse function…
atan() and atan2()
Similarly, using atan(), we can undo tan(θ) to get θ. But, unlike asin() and acos(), if we graph it, we’ll notice a big difference:
This time it is defined on the whole number line! This makes sense since tan() can return any number between -Infinity and Infinity, so atan() is defined in that domain.
atan() can take any number between -Infinity and Infinity and returns angles -90° and 90°.
This makes atan() incredibly useful to find angles in all kinds of situations, and a lot more versatile than acos() and asin(). That’s why we’ll be using it, along atan2(), going forward. Although don’t worry about atan2() for now, we’ll get to it later.
Finding the perfect angle
In the last article, we worked a lot with triangles. Specifically, we used the tan() function to find one of the sides of a right-angled triangle from the following relationships:
To make it work, we needed to know one of its sides and the angle, and by solving the equation, we would get the other side. However, in most cases, we do know the lengths of the triangle’s sides and what we are actually looking for is the angle. In that case, the last
