{"id":3322,"date":"2025-09-26T14:20:39","date_gmt":"2025-09-26T14:20:39","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/most-hated-css-feature-cos-sin\/"},"modified":"2025-09-26T14:20:39","modified_gmt":"2025-09-26T14:20:39","slug":"most-hated-css-feature-cos-sin","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/most-hated-css-feature-cos-sin\/","title":{"rendered":"The Most Hated CSS Feature: cos() and sin() Explained"},"content":{"rendered":"<article>\n<h2>Introduction<\/h2>\n<p>CSS has been a game-changer in the world of web development, providing developers with the tools to create visually stunning websites. However, not all features are met with open arms. Among the most contentious are the <code>cos()<\/code> and <code>sin()<\/code> functions. Often labeled as the &#8220;most hated&#8221; CSS feature, these functions can create confusion and frustration for many developers. In this post, we will delve into why these functions are disliked, how to use them correctly, and their practical applications.<\/p>\n<h2>Understanding cos() and sin()<\/h2>\n<p>Firstly, let&#8217;s clarify what <code>cos()<\/code> and <code>sin()<\/code> do. Both of these functions are mathematical functions used in CSS to calculate the cosine and sine of an angle, respectively. They are part of the CSS <code>calc()<\/code> function family, which allows for dynamic calculations.<\/p>\n<h3>Why Are They Hated?<\/h3>\n<ul>\n<li><strong>Complexity:<\/strong> Many developers find the mathematical concepts behind these functions confusing, especially those who may not have a strong background in mathematics.<\/li>\n<li><strong>Inconsistent Results:<\/strong> Because they rely on radians, developers often mistakenly input degrees, leading to unexpected results.<\/li>\n<li><strong>Limited Use Cases:<\/strong> Many feel that the practical applications of <code>cos()<\/code> and <code>sin()<\/code> are limited, making the learning curve seem unnecessary.<\/li>\n<\/ul>\n<h2>How to Use cos() and sin() in CSS<\/h2>\n<p>Despite the disdain, understanding how to use these functions can enhance your CSS skills. Here\u2019s a step-by-step guide on how to implement them.<\/p>\n<h3>Step 1: Setting Up Your Environment<\/h3>\n<p>Before diving into code, ensure you have a basic HTML structure ready. You can use tools like the <a href=\"https:\/\/webtoolslab.io\/tools\/html-minifier.php\">HTML Minifier<\/a> to clean up your code.<\/p>\n<pre><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;CSS cos() and sin() Example&lt;\/title&gt;\n    &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=\"circle\"&gt;&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<h3>Step 2: Implementing CSS<\/h3>\n<p>Next, create a CSS file (styles.css) and start styling your element. Here\u2019s an example of how to use <code>cos()<\/code> and <code>sin()<\/code> to create a circular motion effect.<\/p>\n<pre><code>.circle {\n    width: 100px;\n    height: 100px;\n    background-color: blue;\n    border-radius: 50%;\n    position: relative;\n    animation: rotate 5s linear infinite;\n}\n\n@keyframes rotate {\n    0% {\n        transform: translate(0, 0);\n    }\n    100% {\n        transform: translate(calc(100px * cos(360deg)), calc(100px * sin(360deg)));\n    }\n}<\/code><\/pre>\n<h3>Step 3: Testing Your Implementation<\/h3>\n<p>Open your HTML file in a browser to see the effect in action. The blue circle should rotate based on the calculations made by <code>cos()<\/code> and <code>sin()<\/code>.<\/p>\n<h2>Practical Applications of cos() and sin()<\/h2>\n<p>While <code>cos()<\/code> and <code>sin()<\/code> may not be everyone&#8217;s favorite, they can be effectively used in certain scenarios:<\/p>\n<ul>\n<li><strong>Animations:<\/strong> Use these functions to create complex animations that involve circular motion.<\/li>\n<li><strong>Responsive Design:<\/strong> Calculate dynamic positions of elements based on viewport size.<\/li>\n<li><strong>Graphical Representations:<\/strong> Implement these functions in visual elements that require mathematical calculations, such as graphs or charts.<\/li>\n<\/ul>\n<h2>FAQs<\/h2>\n<h3>1. Are cos() and sin() functions supported in all browsers?<\/h3>\n<p>Yes, these functions are supported in all modern browsers. However, always test for compatibility.<\/p>\n<h3>2. Can I use these functions for non-animated properties?<\/h3>\n<p>Yes, you can use <code>cos()<\/code> and <code>sin()<\/code> for any property that accepts a length value, like <code>top<\/code>, <code>left<\/code>, or <code>transform<\/code>.<\/p>\n<h3>3. What is the difference between radians and degrees in CSS?<\/h3>\n<p>CSS uses radians for trigonometric functions. To convert degrees to radians, multiply by <code>\u03c0\/180<\/code>.<\/p>\n<h2>Conclusion<\/h2>\n<p>While the <code>cos()<\/code> and <code>sin()<\/code> functions may be viewed as the &#8220;most hated&#8221; features of CSS, understanding their applications can open up new possibilities for animations and dynamic designs. By mastering these functions, you can elevate your CSS skills and create more engaging web experiences. For more tools to enhance your development process, check out the <a href=\"https:\/\/webtoolslab.io\/\">WebToolsLab (All Tools)<\/a> page!<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Explore the most hated CSS feature: cos() and sin(). Learn why developers dislike it and how to work with it effectively.<\/p>\n","protected":false},"author":1,"featured_media":2881,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-3322","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>The Most Hated CSS Feature: cos() and sin() Explained - WebToolsLab<\/title>\n<meta name=\"description\" content=\"Explore the most hated CSS feature: cos() and sin(). Learn why developers dislike it and how to work with it effectively.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webtoolslab.io\/blog\/most-hated-css-feature-cos-sin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Most Hated CSS Feature: cos() and sin() Explained - WebToolsLab\" \/>\n<meta property=\"og:description\" content=\"Explore the most hated CSS feature: cos() and sin(). Learn why developers dislike it and how to work with it effectively.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/most-hated-css-feature-cos-sin\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-26T14:20:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1820\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"maashraf\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"maashraf\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/most-hated-css-feature-cos-sin\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/most-hated-css-feature-cos-sin\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"The Most Hated CSS Feature: cos() and sin() Explained\",\"datePublished\":\"2025-09-26T14:20:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/most-hated-css-feature-cos-sin\\\/\"},\"wordCount\":504,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/most-hated-css-feature-cos-sin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245471879.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/most-hated-css-feature-cos-sin\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/most-hated-css-feature-cos-sin\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/most-hated-css-feature-cos-sin\\\/\",\"name\":\"The Most Hated CSS Feature: cos() and sin() Explained - WebToolsLab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/most-hated-css-feature-cos-sin\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/most-hated-css-feature-cos-sin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245471879.webp\",\"datePublished\":\"2025-09-26T14:20:39+00:00\",\"description\":\"Explore the most hated CSS feature: cos() and sin(). Learn why developers dislike it and how to work with it effectively.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/most-hated-css-feature-cos-sin\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/most-hated-css-feature-cos-sin\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/most-hated-css-feature-cos-sin\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245471879.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245471879.webp\",\"width\":1820,\"height\":1024,\"caption\":\"Comparison of the best free HTML minifiers online for web developers\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/most-hated-css-feature-cos-sin\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Most Hated CSS Feature: cos() and sin() Explained\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\",\"name\":\"WebToolsLab Free Online Developer Tools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\",\"name\":\"maashraf\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"width\":96,\"height\":96,\"caption\":\"maashraf\"},\"logo\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\"},\"sameAs\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\"],\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/author\\\/maashraf\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Most Hated CSS Feature: cos() and sin() Explained - WebToolsLab","description":"Explore the most hated CSS feature: cos() and sin(). Learn why developers dislike it and how to work with it effectively.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webtoolslab.io\/blog\/most-hated-css-feature-cos-sin\/","og_locale":"en_US","og_type":"article","og_title":"The Most Hated CSS Feature: cos() and sin() Explained - WebToolsLab","og_description":"Explore the most hated CSS feature: cos() and sin(). Learn why developers dislike it and how to work with it effectively.","og_url":"https:\/\/webtoolslab.io\/blog\/most-hated-css-feature-cos-sin\/","og_site_name":"WebToolsLab","article_published_time":"2025-09-26T14:20:39+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp","type":"image\/webp"}],"author":"maashraf","twitter_card":"summary_large_image","twitter_misc":{"Written by":"maashraf","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webtoolslab.io\/blog\/most-hated-css-feature-cos-sin\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/most-hated-css-feature-cos-sin\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"The Most Hated CSS Feature: cos() and sin() Explained","datePublished":"2025-09-26T14:20:39+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/most-hated-css-feature-cos-sin\/"},"wordCount":504,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/most-hated-css-feature-cos-sin\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/most-hated-css-feature-cos-sin\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/most-hated-css-feature-cos-sin\/","url":"https:\/\/webtoolslab.io\/blog\/most-hated-css-feature-cos-sin\/","name":"The Most Hated CSS Feature: cos() and sin() Explained - WebToolsLab","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/most-hated-css-feature-cos-sin\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/most-hated-css-feature-cos-sin\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp","datePublished":"2025-09-26T14:20:39+00:00","description":"Explore the most hated CSS feature: cos() and sin(). Learn why developers dislike it and how to work with it effectively.","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/most-hated-css-feature-cos-sin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/most-hated-css-feature-cos-sin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/most-hated-css-feature-cos-sin\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp","width":1820,"height":1024,"caption":"Comparison of the best free HTML minifiers online for web developers"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/most-hated-css-feature-cos-sin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webtoolslab.io\/blog\/"},{"@type":"ListItem","position":2,"name":"The Most Hated CSS Feature: cos() and sin() Explained"}]},{"@type":"WebSite","@id":"https:\/\/webtoolslab.io\/blog\/#website","url":"https:\/\/webtoolslab.io\/blog\/","name":"WebToolsLab Free Online Developer Tools","description":"","publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webtoolslab.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb","name":"maashraf","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","width":96,"height":96,"caption":"maashraf"},"logo":{"@id":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png"},"sameAs":["https:\/\/webtoolslab.io\/blog"],"url":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"}]}},"jetpack_featured_media_url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp",1820,1024,false]},"uagb_author_info":{"display_name":"maashraf","author_link":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"},"uagb_comment_info":0,"uagb_excerpt":"Explore the most hated CSS feature: cos() and sin(). Learn why developers dislike it and how to work with it effectively.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3322","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/comments?post=3322"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3322\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2881"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}