Calculate the sine, cosine, tangent, and more in CSS.

Bramus

In CSS it's possible to writemathematical expressions. At the base sits thecalc() function to do calculations, but most likely you've also heard ofmin(),max(), andclamp() as well.

Joining these functions are the trigonometric functionssin(),cos(),tan(),asin(),acos(),atan(), andatan2(). These functions aredefined in the CSS Values and Units Module Level 4 and are available in all browsers.

sin(),cos(), andtan()

The core three trig functions are:

• cos(): Returns the cosine of an angle, which is a value between-1 and1.
• sin(): Returns the sine of an angle, which is a value between-1 and1.
• tan(): Returns the tangent of an angle, which is a value between−∞ and+∞.

Unlike their JavaScript counterparts, these functions accept both angles and radians as their argument.

In the following demo, these functions are used to draw the lines that make up the triangle surrounding the set--angle:

• 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--radius of 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--radius multiplied by the cosine of the--angle.
• The "opposite"(blue line) is a line from the center of the dot along the Y-axis. Its length is equal to the--radius multiplied by the sine of the--angle.
• Thetan() function of the--angle is used to draw the green line from the dot towards the X-axis.

asin(),acos(),atan(), andatan2()

Thearc orinverse counterparts tosin(),cos(), andtan() areasin(),acos(), andatan() 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.

Finally there'satan2() which accepts two argumentsA andB. The function returns the angle between the positive X-axis and the point(B,A).

Examples

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 following demo, 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 thecos() and, respectively, thesin() of the--angle into account.

:root{--radius:20vmin;}.dot{--angle:30deg;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 itsnth-child index. For example, if there are three dots, there's a distance of120deg (=360deg / 3) between each dot.

• The first child element out of three gets offset by0 x 120deg =0deg.
• The second child element out of three gets offset by1 x 120deg =120deg.
• The third child element out of three gets offset by2 x 120deg =240deg.

Rotate an element to face its origin

Theatan2() function calculates the relative angle from one point to another. The function accepts two comma-separated values as its parameters: they andx position of the other point, relative to the originating point which sits at origin0,0.

With the calculated value it's possible to rotate elements so that they face each other, by using theIndividual Transform Properties.

In the following example, the boxes are rotated so that they face the location of the mouse. The mouse position is synced to a custom property through JavaScript.

div.box{--my-x:200;--my-y:300;/* Position the box inside its parent */position:absolute;width:50px;aspect-ratio:1;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 */rotate:atan2(calc((var(--mouse-x)-var(--my-x)-25)*1),calc((var(--mouse-y)-var(--my-y)-25)*-1));}

Community highlight

As demonstrated in thisAnimated Möbius strip by Ana Tudor,cos() andsin() can be used for more than just translations. Here their outcome is used to manipulate the thes andl components ofthehsl() color function.