I want to look at practical uses for CSS trigonometric functions. And we'll start with what may be the most popular functions of the "worst" feature: sin() and cos().

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

CSS trigonometric functions cos() and sin() enable powerful layout and animation techniques despite being labeled the "most hated" CSS feature in State of CSS 2025. The functions map to unit circle coordinates, allowing developers to create circular layouts, wavy patterns, and damped oscillatory animations. Practical examples include circular menus, DNA-strand-like chains, and physics-based bouncing effects that decay over time.

The “Most Hated” CSS Feature: cos() and sin()

What the heck are cos() and sin() anyway?

Honestly, at this point CSS is less Cascading Style Sheets and more Cursed Sorcery Syntax. What’s next—Pythagoras-powered padding?

These are so cool actually! I created a slider once that moved in a circular way and this was golden at that time!

css introduce also the if() method if that method mixing together you can build an airplane out of the box … so lets bring css in the backend.