To place menu buttons around a circle, make an element bob smoothly, or draw a wave-like path, you need a value that rises and falls predictably as an angle changes. The sine function, written as sin() in CSS and Math.sin() in JavaScript, supplies that value. It represents the vertical component of an angle: on a unit circle, a point at angle θ has y-coordinate sin(θ). section 9.1.1 section 9.1.5
For a right triangle, sine is opposite divided by hypotenuse: sin(θ) = opposite / hypotenuse. Its output moves smoothly from −1 to 1 as θ travels around a circle. At 0°, sin is 0; at 45°, it is about 0.707; at 90°, it is 1; at 270°, it is −1. Graphed over changing angles, those repeating values form a sine wave. section 9.1.1
Table 9.2 The seven trig functions
| Function |
Argument(s) accepted |
What it returns |
Examples |
|---|---|---|---|
| CSS: |
An angle or number |
A number between −1 and 1, representing the sine of angle |
|
| CSS: |
An angle or number |
A number between −1 and 1, representing the cosine of angle |
|
| CSS: |
An angle or number |
A number between −∞ and ∞, representing the tangent of angle |
|
| CSS: |
A number between −1 and 1 |
An angle between −90deg and 90deg, representing the inverse sine of number |
|
| CSS: |
A number between −1 and 1 |
An angle between 0deg and 180deg, representing the inverse cosine of number |
|
| CSS: |
A number |
An angle between -90deg and 90deg, representing the inverse tangent of number |
|
| CSS: |
Two numbers |
A value between −180deg and 180deg (CSS) or between −π and π radians (JS), representing the angle between the positive x-axis and the point ( x, y) |
|
Compare CSS sin(angle) with JavaScript Math.sin(angle), including their accepted inputs and representative outputs. section 9.1.5
Place an item on a circle
Sine calculates the vertical position of a point on a circle, while cosine calculates its horizontal position: x = centerX + r * cos(angle) y = centerY + r * sin(angle) For a menu centered at 150px, 150px with radius 100px, divide a full circle by the item count. For each item, multiply that angle step by its index, then use Math.sin(angle) for top and Math.cos(angle) for left. A translate(-50%, -50%) adjustment centers the item on its calculated point. section 9.2.1 section 9.1.1
Build a fixed circular menu in CSS
When the item count is fixed, CSS can calculate each vertical position directly. Define a center, radius, and angle step, then pair cos() for left with sin() for top: :root { --total-items: 6; --radius: 100px; --centerX: 150px; --centerY: 150px; --angle-step: calc(360deg / var(--total-items)); } .menu-item:nth-child(2) { left: calc(var(--centerX) + var(--radius) * cos(var(--angle-step) * 1)); top: calc(var(--centerY) + var(--radius) * sin(var(--angle-step) * 1)); } section 9.2.1
The same smooth cycle makes sine useful for wave effects. Multiplying sin(angle) changes a wave’s amplitude, its maximum vertical offset from the horizontal axis. Multiplying the angle changes frequency, or how quickly the wave cycles. That lets a changing angle drive a repeating vertical movement rather than a fixed circular position. section 9.3 section 9.6
Use CSS sin() when a stylesheet can express the layout with known values, such as a fixed set of menu items. Use Math.sin() when JavaScript needs to calculate positions for a variable list of elements. CSS trigonometric functions gained mainstream support in March 2023 and are supported by major evergreen browsers, including Chrome 111+, Firefox 108+, and Safari 15.4+. section 9.2.1 section 9.1.5
