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

The sin() function returns a unitless number for a given angle. This is the ratio of the length of the opposite side to that of the hypotenuse in a right‑angled triangle. For a length‑based CSS property, multiply that number by a length such as the animation radius.sin() tells you your vertical position. It can also be used to find the unknown angle or sides of a right‑angled triangle.

In CSS, we can multiply sin() by a length to create wave‑like animations. This example uses a 5rem amplitude and a 90‑degree midpoint:

@keyframes sineWave {  0%, 100% { transform: translateY(calc(5rem * sin(0deg))); }  50% { transform: translateY(calc(5rem * sin(90deg))); }}.element {  animation: sineWave 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.

For example, we can multiply cos() and sin() by the same 5rem radius, then sample the four quarter turns to create circular motion:

@keyframes circularMotion {  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: circularMotion 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 the tan() function, returning the angle whose tangent is the given number. Given a slope (from tan()), it tells you the corresponding angle.

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

Unique amongst CSS trigonometric functions, atan2(y, x) calculates the angle in radians between the positive x‑axis and the ray to the point (y, x). It accepts two arguments, the coordinates y and x, and is particularly useful for finding the direction or angle of a line.

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.