The cosine function, written as cos() in CSS and Math.cos() in JavaScript, turns an angle into a value from −1 to 1. In frontend geometry, it supplies the horizontal component of that angle: on a unit circle, x = cos(θ); on a circle of radius r, x = centerX + r * cos(angle). Pair it with sine for the vertical coordinate. section 9.1.1 section 9.1.5
Cosine comes from right-triangle geometry: cos(θ) = adjacent / hypotenuse. For a point moving around a circle, cosine says how far right or left it is from the center. At 0°, cosine is 1; at 90°, it is 0; at 180°, it is −1. Its values repeat smoothly as the angle completes each turn. section 9.1.1
Place items around a circular menu
Give each item an equal angle step, then use cosine for left and sine for top. With six items, the step is 2π / 6. The translate transform recenters each item on its calculated circle point. const angleStep = (2 * Math.PI) / items.length; items.forEach((item, index) => { const angle = angleStep * index; const x = centerX + radius * Math.cos(angle); const y = centerY + radius * Math.sin(angle); item.style.left = x + 'px'; item.style.top = y + 'px'; item.style.transform = 'translate(-50%, -50%)'; }); section 9.2.1 section 9.6
CSS can perform the same horizontal calculation when the number of positions is fixed. CSS cos() accepts an angle or number, so custom properties can hold the radius, center, and angle step. Use cosine in left and sine in top to preserve the circle rather than treating either function as a complete positioning formula. section 9.1.5 section 9.2.1
Create a repeating pendulum swing
Cosine also forms a repeating wave. Multiply it by a maximum angle to control the swing size, and multiply time by a speed value to control how quickly it oscillates. const currentAngle = maxAngle * Math.cos(speed * t); section 9.3.3
A cosine wave has the same repeating shape as a sine wave, shifted horizontally by 90° (π/2 radians). That makes cosine useful not only for circular layouts, but also for wave patterns and oscillating interface effects where a predictable repeating value is needed. section 9.1.1 section 9.3
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) |
|
Use the function table to check CSS and JavaScript names, accepted arguments, output range, and familiar angle values for cos(). section 9.1.5
