CSS Trig Functions Lab: sin(), cos() & calc() — Free Snippet

For years, positioning an element on a circle — an orbiting dot, a radial menu, a clock hand, a gauge needle — required JavaScript. You'd compute x = cx + r * Math.cos(angle) and y = cy + r * Math.sin(angle) in a script and write the result into inline styles or a transform. CSS Values and Units Module Level 4 changes that by adding native trigonometric functions directly to the language: sin(), cos(), tan(), asin(), acos(), atan(), and atan2(). This lab demonstrates the two most useful ones, cos() and sin(), driving real circular motion with zero JavaScript trigonometry.

How the math maps to CSS

Every satellite dot in the orbit uses a transform: translate(...) built from three ingredients: an angle custom property, a radius custom property, and the trig functions themselves. The core expression is translate(calc(cos(var(--angle)) * var(--radius)), calc(sin(var(--angle)) * var(--radius))). This is the exact same parametric circle equation you'd write in a canvas or SVG script — x = r·cos(θ), y = r·sin(θ) — except it lives entirely in a CSS custom property and gets recalculated by the browser's layout engine whenever --angle or --radius changes. Critically, CSS trig functions accept an angle with a unit — deg, rad, grad, or turn — so cos(90deg) is valid CSS and evaluates to (approximately) 0, just like its JavaScript counterpart Math.cos(Math.PI/2) but without you needing to convert degrees to radians yourself.

Why custom properties are the glue

The six static satellites are spaced evenly using --angle: calc((360deg / var(--count)) * var(--i)), where --i is set inline per element (0 through 5) and --count is 6. This is a classic CSS custom-property trick: each element gets a unique index via an inline style attribute, and a single shared formula in the stylesheet computes a per-element result from it — no per-element CSS rules needed. The draggable tracker dot works the same way but with --angle driven by JavaScript instead of a static index, proving that CSS custom properties are a live binding: change the property with element.style.setProperty('--angle', '45deg') and the browser re-evaluates every calc() and trig function that references it, repainting instantly with no manual recalculation of pixel offsets.

`calc()` as the composition operator

None of this works without calc() gluing the trig result to a length. cos(var(--angle)) returns a unitless number between -1 and 1 — it cannot be used as a translate() argument directly. Wrapping it as calc(cos(var(--angle)) * var(--radius)) multiplies that unitless ratio by a length (110px), producing a valid CSS length the transform can consume. This number-times-length pattern is exactly how clamp(), min(), and max() are typically combined with trig in production: fluid radial layouts, circular progress rings, and orbiting notification badges all use this same three-function stack.

Browser support and fallbacks

sin(), cos(), and tan() shipped in Chrome 111, Safari 15.4, and Firefox 118 — they are supported in all evergreen browsers as of 2024 and safe to use without a JavaScript fallback in most 2025/2026 projects. For older browsers, wrap trig-dependent layout in @supports (top: calc(sin(1turn) * 1px)) and provide a static or JS-computed fallback inside the @supports negation. Because the calculation happens in the CSS engine rather than JavaScript, animating --angle with a CSS @keyframes or transition is also GPU-accelerated and runs off the main thread, which is a genuine performance win over the old requestAnimationFrame + inline-style approach for orbit and gauge-style UI.