CSS Math Functions: A Guide to cos() and sin()

CSS trigonometric functions have transformed how we create complex layouts and animations without JavaScript. Among these powerful tools, cos() and sin() stand out as essential functions for circular layouts, wave patterns, and smooth animations.

Understanding CSS cos() and sin() Through the Unit Circle

The CSS cos() and sin() functions map angles to coordinates using the unit circle concept. Think of the unit circle as a circle with radius 1, centered at the origin of a coordinate system.

• cos() returns the X coordinate for a given angle
• sin() returns the Y coordinate for a given angle

When you pass an angle to these CSS math functions, they return values between -1 and 1, representing positions on the unit circle. This mathematical relationship becomes the foundation for creating dynamic CSS layouts.

/* Basic syntax */
.element {
  --angle: 45deg;
  --x: cos(var(--angle)); /* Returns ~0.707 */
  --y: sin(var(--angle)); /* Returns ~0.707 */
}

Creating Circular Layouts with CSS Trigonometric Functions

One of the most practical applications of CSS cos() and sin() is positioning elements around a circle. This technique eliminates the need for hardcoded positions or JavaScript calculations.

.circular-menu {
  --radius: 150px;
  --total-items: 6;
}

.menu-item {
  --angle: calc(360deg / var(--total-items) * var(--index));
  transform: 
    translateX(calc(cos(var(--angle)) * var(--radius)))
    translateY(calc(sin(var(--angle)) * var(--radius)));
}

This approach automatically distributes elements evenly around a circle, making it perfect for radial menus, clock faces, or decorative layouts. The CSS unit circle concept scales naturally with any radius value you choose.

Building Wave Patterns and Oscillatory CSS Animations

CSS trigonometric functions excel at creating organic wave patterns. Since sin() and cos() produce smooth oscillations, they’re ideal for wave-like CSS animations without complex keyframes.

.wave-element {
  --frequency: 2;
  --amplitude: 50px;
  --phase: calc(var(--index) * 30deg);
  
  transform: translateY(
    calc(sin(var(--phase) * var(--frequency)) * var(--amplitude))
  );
}

For animated waves, combine these functions with CSS custom properties and animations:

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

.oscillating {
  --wave: calc(sin(var(--progress) * 360deg) * 100px);
  transform: translateX(var(--wave));
  animation: wave-motion 2s linear infinite;
}

@keyframes wave-motion {
  to { --progress: 1; }
}

Performance and Browser Support

CSS math functions, including cos() and sin(), now have baseline support across all major browsers. These functions are natively optimized within the browser’s rendering pipeline, providing better performance than JavaScript-based calculations for CSS layouts and animations.

Key advantages:

• No runtime JavaScript overhead
• Calculations happen during the style computation phase
• Automatic recalculation on viewport or property changes
• Smooth 60fps animations when combined with CSS transforms

Practical Implementation Tips

When working with CSS trigonometric functions, remember these best practices:

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

/* Responsive circular layout */
.item {
  --responsive-radius: min(40vw, 300px);
  --x: calc(cos(var(--angle)) * var(--responsive-radius));
  --y: calc(sin(var(--angle)) * var(--responsive-radius));
  transform: translate(var(--x), var(--y));
}

Conclusion

CSS cos() and sin() functions bring mathematical precision to web layouts without JavaScript dependencies. From circular navigation menus to smooth wave animations, these CSS math functions offer native browser performance and cleaner, more maintainable code. As browser support continues to solidify, CSS trigonometric functions are becoming essential tools for modern CSS layouts and animations.

FAQs

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..