--- title: The “Most Hated” CSS Feature: cos() and sin() | daily.dev description: CSS trigonometric functions cos() and sin() enable powerful layout and animation techniques despite being labeled the "most hated" CSS feature in State of CSS... canonical: https://daily.dev/posts/the-most-hated-css-feature-cos-and-sin--zxsc85o8g twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: The “Most Hated” CSS Feature: cos() and sin() | daily.dev og:description: CSS trigonometric functions cos() and sin() enable powerful layout and animation techniques despite being labeled the "most hated" CSS feature in State of CSS... og:url: https://daily.dev/posts/the-most-hated-css-feature-cos-and-sin--zxsc85o8g og:image: https://api.daily.dev/og/posts/zxsc85O8g.png og:image:alt: The “Most Hated” CSS Feature: cos() and sin() og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # The “Most Hated” CSS Feature: cos() and sin() **[CSS-Tricks](https://daily.dev/sources/css_tricks)** · 15 min read · 15 upvotes · 8 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@augustine\_godwin** · 2 upvotes > Honestly, at this point CSS is less Cascading Style Sheets and more Cursed Sorcery Syntax. What’s next—Pythagoras-powered padding? **@fabianletsch** · 0 upvotes > These are so cool actually! I created a slider once that moved in a circular way and this was golden at that time! **@wessonenriquez** · 0 upvotes > 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. ## Similar posts on daily.dev - [The “Most Hated” CSS Feature: tan\(\)](https://daily.dev/posts/the-most-hated-css-feature-tan--0af8x8h2r) · CSS-Tricks · 28 upvotes · 0 comments - [The “Most Hated” CSS Feature: asin\(\), acos\(\), atan\(\) and atan2\(\)](https://daily.dev/posts/the-most-hated-css-feature-asin-acos-atan-and-atan2--zbn43uros) · CSS-Tricks · 4 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#math](https://daily.dev/tags/math) [View this post on daily.dev](https://daily.dev/posts/the-most-hated-css-feature-cos-and-sin--zxsc85o8g) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"The “Most Hated” CSS Feature: cos() and sin()","url":"https://daily.dev/posts/the-most-hated-css-feature-cos-and-sin--zxsc85o8g","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/the-most-hated-css-feature-cos-and-sin--zxsc85o8g"},"datePublished":"2025-09-15T14:33:03.602Z","dateModified":"2025-09-15T14:33:46.907Z","description":"CSS trigonometric functions cos() and sin() enable powerful layout and animation techniques despite being labeled the \"most hated\" CSS feature in State of CSS...","image":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/09/most_hated_feature.jpg","thumbnailUrl":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/09/most_hated_feature.jpg","isAccessibleForFree":true,"articleSection":"CSS-Tricks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"CSS-Tricks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks","url":"https://daily.dev/sources/css_tricks"},"commentCount":8,"discussionUrl":"https://daily.dev/posts/the-most-hated-css-feature-cos-and-sin--zxsc85o8g","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":15},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":8}],"keywords":"webdev,css,math","timeRequired":"PT15M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":3,"name":"The “Most Hated” CSS Feature: cos() and sin()"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/the-most-hated-css-feature-cos-and-sin--zxsc85o8g","comment":[{"@type":"Comment","text":"Honestly, at this point CSS is less Cascading Style Sheets and more Cursed Sorcery Syntax. What’s next—Pythagoras-powered padding?","datePublished":"2025-09-15T17:53:26.816Z","url":"https://daily.dev/posts/zxsc85O8g#c-Z1eySE5Mu","author":{"@type":"Person","name":"Augustine Godwin","url":"https://daily.dev/augustine_godwin","image":"https://lh3.googleusercontent.com/a/ACg8ocKFJe1UKS6I4suo6mmeVg8UNQSC7PgNwoHxakLWRGmTWAN4IA=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"These are so cool actually! I created a slider once that moved in a circular way and this was golden at that time!","datePublished":"2025-09-25T18:36:55.389Z","url":"https://daily.dev/posts/zxsc85O8g#c-IDLzbHfRB","author":{"@type":"Person","name":"Fabian Letsch","url":"https://daily.dev/fabianletsch","image":"https://lh3.googleusercontent.com/a/ACg8ocKR6BVy_wn23EoOKq7-BlszlcXcLmASlnb7l-GtS-q1bePnkaJf=s96-c"}},{"@type":"Comment","text":"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.","datePublished":"2025-09-26T03:09:16.431Z","url":"https://daily.dev/posts/zxsc85O8g#c-y5T3whep6","author":{"@type":"Person","name":"Wesson Enriquez","url":"https://daily.dev/wessonenriquez","image":"https://lh3.googleusercontent.com/a/ACg8ocIr1BiHpnvF5et8PxhCQQN69oOMcNKJ48wMSR01WzR-oI8n5w=s96-c"}}]} ```