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 the sine of a given angle. This is the ratio of the length of the opposite side to that of the hypotenuse in a right‑angled triangle. Imagine a circle: if you move around the circle, 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 use this to create wave‑like, oscillating animations. For example, if we wanted to animate an element up and down in a sine wave pattern, our CSS could look something like this:

@keyframes sineWave {  0%, 100% { transform: translateY(sin(0)); }  50% { transform: translateY(sin(180deg)); }}.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.

In CSS, because if relates to the X‑axis, we can use cos() for horizontal movements or transformations in animations.

For example, we could create a circular motion animation like this:

@keyframes circularMotion {  0% { transform: translateX(cos(0)) translateY(sin(0)); }  100% { transform: translateX(cos(360deg)) translateY(sin(360deg)); }}.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.

In CSS we can use this to help create skewing effects or in angular designs. So, skewing an element based on the tangent of an angle looks like this:

.element {  transform: skewX(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 can be instrumental in calculating angles from ratios, which might be needed in more complex interactive designs.

.element {  width: calc(10rem * 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 a new and powerful toolkit for creating dynamic, responsive, and visually appealing motion and design in our web applications. We can use these to apply mathematical precision directly within our stylesheets.

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