When CSS Went to Math Class: Sin() & Cos()

Image by Vitaly Gariev from Unsplash

As a high school kid, I would always question why I was learning Trigonometric functions and if I’d ever use them in real life problem solving. Those mysterious squiggly functions that haunted me during high school are back. But this time, they’re not here to make me cry over a calculator but it’s here to make CSS come alive!

Surprise, surprise — those Math class nightmares didn’t stay behind. The 2025.stateofcss lists Trigonometric functions among the ‘Most Hated Feature’

In this 2 (or even 3) part series, we will uncover some real use cases for CSS trigonometric functions and hopefully, you might even start looking forward to a little CSS trigonometry. In this article, I will cover the most popular functions of the ‘most hated’ feature: Sin()and Cos()

The Basics — What do Sin() and cos()even do?

If you slept through trigonometry, here’s the cheat sheet:

• Sin(0)gives you how high you are on a circle (the Y-axis).
• Cos(0)gives you how wide you are on a circle (the X-axis).

In CSS they work just like how they do in Math — you give them an angle, and they return a number between -1 and 1.

You can then multiply that by a length to create oscillation or circular movement.

Use cases

The best way to understand trigonometry is by actually ‘seeing’ it.

1. Circular layouts — The easiest way to understand Sin() and Cos()

Let’s arrange some dots evenly around a circle using only CSS and some math.

<div class="parent-container">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

.parent {
  position: relative;
  width: 0; 
  height: 0;
}

/* the “dots” */
.circle {
  --size: 25px;
  --offset: 100px;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: lightgreen;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(
    calc(cos(var(--degrees)) * var(--offset)),
    calc(sin(var(--degrees)) * var(--offset))
  );
}

/* Set angle for each dot */
.circle:nth-of-type(1)  { --degrees: 0deg; }
.circle:nth-of-type(2)  { --degrees: 30deg; }
.circle:nth-of-type(3)  { --degrees: 60deg; }
.circle:nth-of-type(4)  { --degrees: 90deg; }
.circle:nth-of-type(5)  { --degrees: 120deg; }
.circle:nth-of-type(6)  { --degrees: 150deg; }
.circle:nth-of-type(7)  { --degrees: 180deg; }
.circle:nth-of-type(8)  { --degrees: 210deg; }
.circle:nth-of-type(9)  { --degrees: 240deg; }
.circle:nth-of-type(10) { --degrees: 270deg; }
.circle:nth-of-type(11) { --degrees: 300deg; }
.circle:nth-of-type(12) { --degrees: 330deg; }

Sin() and Cos()are used to position each dot around a circle. Cos()controls the x position (horizontal), and Sin()controls the y position (vertical). Each dot gets a different — degrees value (0, 30, 60, …), and multiplying those by a radius ( — offset) places them evenly in a circular layout.

2. Wavy patterns

Waves are everywhere — in nature, sound, and even in design. Using the Sin()function in CSS, we can translate the same natural rhythm into our layouts, creating smooth, balanced curves that feel organic yet precise.

<div class="wave-line">
  <div style="--i:0"></div>
  <div style="--i:1"></div>
  <div style="--i:2"></div>
  <div style="--i:3"></div>
  <div style="--i:4"></div>
  <div style="--i:5"></div>
  <div style="--i:6"></div>
  <div style="--i:7"></div>
  <div style="--i:8"></div>
  <div style="--i:9"></div>
</div>

.wave-line {
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
height: 200px;
background: #f6f8ff;
}

.wave-line div {
--t: 0deg;
--angle: calc(var(--i) * 36deg + var(--t));
width: 16px;
height: 16px;
border-radius: 50%;
background: hotpink;
transform: translateY(calc(sin(var(--angle)) * 40px));
animation: wave 2s linear infinite;
}

Each dot gets its own i(index), which we multiply by 36 deg to spread them evenly across 360 deg. Sin()then maps those angles to values between -1 and 1which is perfect for positioning dots along a gentle curve. This creates a visually rhythmic, wave-like pattern.

What can you do with this?

• Create decorative dividers or flowing separators between sections.
• Build magazine-style layouts with wave-shaped image alignments.

3. Animations

Trigonometric functions in CSS aren’t just for static layouts — they could also be used for perfect for smooth, natural animations. By updating angles over time, elements can move along curves, orbit around points, or create rhythmic wave patterns.

<div class="orbit-container">
  <div class="planet"></div>
</div>

<button id="toggle-btn">Start Animation</button>

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #0d1b2a, #1b263b);
  gap: 2rem;
  margin: 0;
}

.orbit-container {
  position: relative;
  width: 300px;
  height: 300px;
  --angle: 0deg; /* CSS variable for animation */
}

.planet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f97316, #ff4500);
  box-shadow: 0 0 20px rgba(255, 87, 34, 0.7);
  transform: translate(
    calc(cos(var(--angle)) * 120px),
    calc(sin(var(--angle)) * 120px)
  );
  transition: transform 0.016s linear;
}

/* Define CSS animation */
@keyframes orbit {
  to {
    --angle: 360deg;
  }
}

.orbit-container.animate .planet {
  animation: orbit 5s linear infinite;
}

const container = document.querySelector('.orbit-container');
const btn = document.getElementById('toggle-btn');

btn.addEventListener('click', () => {
  container.classList.toggle('animate');
  btn.textContent = container.classList.contains('animate')
    ? "Stop Animation"
    : "Start Animation";
});

We start by defining a custom property angle, which represents the current rotation in degrees. They keyframes orbit animation gradually increases this angle from 0 deg to 360 deg. As the angle updates, the element’s position is recalculated using Cos()and Sin()

What can you do with this?

Floating animations can use Sin()to create gentle up-and-down movements, while Cos()can drive side-to-side motions.

Both Sin()and Cos()could be combined to produce complex orbital movements which could be useful for loading indicators, decorative elements, or interactive components that need to follow curved trajectories.

Some general trips

• Leverage transform properties for hardware-accelerated animations
• Combine with calc() to scale results from the unit circle’s -1 to 1 range
• Use responsive units like vw or cqi for scalable layouts
• Use CSS custom properties for reusable values and easier maintenance

Performance

CSS trigonometric functions perform better than JavaScript equivalents because calculations happen during the browser’s style computation phase. This eliminates runtime overhead and provides smoother animations, especially when combined with CSS transforms.

Browser support

Both sin()and cos() are widely supported across all browsers.

Final thoughts

At the end of the day, using trigonometry in CSS might feel like owning a treadmill — it’s impressive that you have it, and you will tell everyone you use it, but most of the time you are just staring at them with a sense of existential dread. Well, don’t be that person. Maybe, we should start showing some love to those ‘most hated features’ (and also your treadmill).

Now go forth and rotate things — responsibly!