CSS Trigonometric Functions: Math in Your Stylesheets

Tue, 05 Nov 2024 00:00:00 +0900

CSS has evolved from a simple styling language into a powerful computation engine. The introduction of trigonometric functions in CSS Values and Units Module Level 4 – shipping in Chrome 111+, Firefox 108+, and Safari 15.4+ – marks a paradigm shift. Developers can now perform geometric calculations directly in stylesheets without preprocessors or JavaScript.

Function Reference and Syntax

Six trigonometric functions are now available in CSS:

Function	Input	Output	Description
`sin(angle)`	`<angle>` or `<number>`	`<number>` [-1, 1]	Sine of an angle
`cos(angle)`	`<angle>` or `<number>`	`<number>` [-1, 1]	Cosine of an angle
`tan(angle)`	`<angle>` or `<number>`	`<number>`	Tangent of an angle
`atan2(y, x)`	`<number>`, `<number>`	`<number>`	Arctangent of y/x (full 360°)
`asin(value)`	`<number>` [-1, 1]	`<number>`	Arcsine
`acos(value)`	`<number>` [-1, 1]	`<number>`	Arccosine

Angle units include deg, rad, grad, and turn. Common pitfalls include forgetting units, division by zero in atan2, and domain errors with asin/acos inputs outside [-1, 1].

Math on Commentary of Takao

CSS Trigonometric Functions: Math in Your Stylesheets

Function Reference and Syntax