Trigonometric Functions in CSS

You'll no doubt already be aware that it's possible to use the calc() function to write mathematical expressions and are probably also aware of min(), max(), and clamp() too. Now, we are starting to see the introduction of trigonometric functions in the latest CSS Values and Units Module Level 4, and browser support is even already pretty good, which opens it up to use in our web applications.

These functions allow for more complex and dynamic designs, animations, and interactions, meaning we can directly leverage trigonometry principles (mathematical calculations involving angles) within our CSS.

sin(): Sine of an Angle

sin() returns a unitless number for an angle. For a right‑angled triangle, it is the opposite side divided by the hypotenuse. When describing a circle, that ratio can supply the vertical coordinate; multiply it by a length such as the radius before using it for a translation.

This example uses the sine values at 0deg and 90deg as endpoints for a vertical bounce of 5rem. The browser eases between those translations; it does not continuously sample a sine wave:

@keyframes verticalBounce {
  0%, 100% { transform: translateY(calc(5rem * sin(0deg))); }
  50% { transform: translateY(calc(5rem * sin(90deg))); }
}

.element {
  animation: verticalBounce 2s infinite;
}

cos(): Cosine of an Angle

The cos() function calculates the cosine of a specified angle. This represents the length of the adjacent side, divided by the length of the hypotenuse in a right‑angled triangle. This is quite similar to sin(), but cos() tells you about the horizontal position instead. On the same circle, as you move, cos() indicates how far to the left or right you are.

Because it relates to the X‑axis, we can use cos() for horizontal movements or transformations in animations.

Here, cos() and sin() give positions at four quarter turns of a circle with radius 5rem. The browser interpolates the translation coordinates between them, so the animated path consists of four straight segments forming a diamond, rather than a circle:

@keyframes quarterTurnPath {
  0%, 100% { transform: translate(calc(5rem * cos(0deg)), calc(5rem * sin(0deg))); }
  25% { transform: translate(calc(5rem * cos(90deg)), calc(5rem * sin(90deg))); }
  50% { transform: translate(calc(5rem * cos(180deg)), calc(5rem * sin(180deg))); }
  75% { transform: translate(calc(5rem * cos(270deg)), calc(5rem * sin(270deg))); }
}

.element {
  animation: quarterTurnPath 3s infinite;
}

tan(): Tangent of an Angle

tan() returns the tangent of an angle, which is the ratio of the length of the opposite side to the length of the adjacent side in a right‑angled triangle. This changes more dramatically than sin() or cos(). It's a little like looking at the slope of a line as you travel around our imaginary circle.

Because tan() also returns a number, it needs a compatible unit before it can be used by a transform that expects a length or angle. Here, the result scales a 1rem horizontal translation:

.element {
  transform: translateX(calc(1rem * tan(45deg)));
}

asin(): Arcsine of a Number

The asin() function, or arcsine, returns the angle whose sine is the given number. It is essentially the inverse operation of finding a sine. If you know your vertical position on the circle and want to find the corresponding angle, you'd use asin().

In CSS we could use this for calculations that require a reversal from a sine value to an angle, which could be particularly useful in more dynamic or interactive styling.

acos(): Arccosine of a Number

In the same way that asin() is the opposite of sin(), arccosine gives us the angle whose cosine is the specified number. It's the inverse of cos(), and helps you find the angle if you know your horizontal position on the circle.

In CSS, I would say that arccosine doesn't have quite as much common use as some of the other functions I'm discussing here. However, it could be useful for computations involving angles derived from cosine values. I just can't think of an obvious example of what that might look like right now.

atan(): Arctangent of a Number

atan() reverses tan(), returning the angle whose tangent is the given number. Given a slope, it returns the corresponding angle within its principal range.

In CSS, arctangent returns an angle, so it can be supplied directly to an angle‑based function such as rotate():

.element {
  transform: rotate(atan(0.5));
}

atan2(): Angle from Coordinates

atan2(y, x) returns an angle from the positive x‑axis to the ray through the Cartesian point (x, y). The arguments are supplied in y, then x order. The result is a CSS angle, not a number that must be interpreted in radians, and it distinguishes the quadrants that a single ratio cannot.

Basically, it's like finding the direction from one point to another. This is especially useful in CSS for dynamic transformations or animations where elements need to be oriented towards certain points or along specific paths.

.element {
  transform: rotate(atan2(10px, 100px));
}

The Wrap‑up

Trigonometric functions in CSS provide numbers or angles that can drive motion and design. Keep the result's type compatible with the receiving property: multiply a unitless ratio by a length for translation, and use an inverse function's angle for rotation.

As browser support grows, the potential for these functions in web design is truly exciting.