Trigonometric functions in CSS
Calculate the sine, cosine, tangent, and more in CSS.
Trigonometric functions #
In CSS it’s possible to write mathematical expressions. At the base sits the
calc() function to do calculations, but most likely you’ve also heard of
clamp() as well.
Joining these functions in Chrome 111 are the trigonometric functions
atan2(). These functions are defined in the CSS Values and Units Module Level 4 and are available in all browsers.
- chrome 111, Supported 111
- firefox 108, Supported 108
- edge 111, Supported 111
- safari 15.4, Supported 15.4
The core three “trig functions” are:
cos(): Returns the cosine of an angle, which is a value between
sin(): Returns the sine of an angle, which is a value between
tan(): Returns the tangent of an angle, which is a value between
In the demo below, these functions are used to draw the lines that make up the triangle surrounding the set
- The “hypotenuse” (yellow line) is a line from the center of the circle to the position of the dot. Its length is equal to the
--radiusof the circle.
- The “adjacent” (red line) is a line from the center of the circle along the X-axis. Its length is equal to the
--radiusmultiplied by the cosine of the
- The “opposite” (blue line) is a line from the center of the circle along the Y-axis. Its length is equal to the
--radiusmultiplied by the sine of the
tan()function of the
--angleis used to draw the green line from the dot towards the X-axis.
The “arc” or “inverse” counterparts to
atan() respectively. These functions do the calculation in the opposite direction: they take a numeric value as their argument and return the corresponding angle for it.
atan2() which accepts two arguments
B. The function returns the angle between the positive X-axis and the point
There are various use-cases for these functions. What follows is a small selection.
Move items on a circular path around a central point #
In the demo below, the dots revolve around a central point. Instead of rotating each dot around its own center and then moving it outwards, each dot is translated on the X and Y axes. The distances on the X and Y axes are determined by taking the
cos() and, respectively, the
sin() of the
--angle into account.
translate: /* Translation on X-axis */
calc(cos(var(--angle)) * var(--radius))
/* Translation on Y-axis */
calc(sin(var(--angle)) * var(--radius) * -1)
To distribute the dots evenly around the central point, each dot is given an additional offset based on its
nth-child index. For example, if there are three dots, there’s a distance of
360deg / 3) between each dot.
- The first child element out of three gets offset by
0 x 120deg=
- The second child element out of three gets offset by
1 x 120deg=
- The third child element out of three gets offset by
2 x 120deg=
Rotate an element to face its origin #
atan2() function calculates the relative angle from one point to another. The function accepts two comma-separated values as its parameters: the
x position of the other point, relative to the originating point which sits at origin
With the calculated value it’s possible to rotate elements so that they face each other, by using the Individual Transform Properties.
/* Position the box inside its parent */
translate: calc((var(--my-x) * 1px)) calc(var(--my-y) * 1px);
/* Rotate so that the box faces the mouse position */
/* For this, take the box its own position and size (25 = half the width) into account */
calc((var(--mouse-x) - var(--my-x) - 25) * 1),
calc((var(--mouse-y) - var(--my-y) - 25) * -1)
Community highlight #
As demonstrated in this Animated Möbius strip by Ana Tudor,
sin() can be used for more than just translations. Here their outcome is used to manipulate the the
l components of the
hsl() color function.
Cover photo by Tamanna Rumee on Unsplash