An Intro to Trigonometric CSS Functions

While perusing the December 2022 post from web.dev about what's new in the web platform, the addition of Trigonometric CSS functions in Firefox caught my eye.

Geometry and trigonometry were my two best math areas in school (I am not an Algebra person and generally did not enjoy math class), so I wanted to a quick look at these functions and what problems they solve for the web platform. When would developers use them?

Trigonometric CSS Functions Overview #

As of December 2022, Firefox and Safari are the two mainstream browsers that support Trigonometric CSS Functions. These include cos(), sin(), tan(), asin(), acos(). atan(), and atan2().

Support in Chromium is estimated to ship in version 111.

Basic use cases per the MDN documentation #

• cos(): can be used to keep the size of a rotated box
• sin(): can be used to size boxes and as an animation-duration value
• tan(): can be used to draw parallelograms
• asin(): can be used to rotate elements
• acos(): can be used to rotate elements
• atan(): can be used to rotate elements
• atan2(): can be used to rotate elements and accepts two values as parameters

The MDN docs highlight the differences between the 4 functions for rotating elements. For example, atan() returns the inverse tangent of two values between -infinity and infinity, whereas sin() returns the sine of a number that has a value between -1 and 1.

What problems do they solve for developers? #

At first glance, the use cases for these functions don't seem incredibly compelling to me. The MDN documentation use cases for rotating a shape or defining widths of elements don't seem that useful for a developer. We can already do those things and the examples with these functions seem long winded.

So I went and found the CSSWG GitHub discussion to dig into the "why?"

The main takeaway: these additions to CSS mean more complex animations that can be built with CSS and not JavaScript. This animation example from Ana Tudor is a good example. Trigonometric computations are done in JavaScript to achieve a seamless animation effect where the points line up exactly as they rotate and when the orange shapes skew on each rotation.

Another possible use case that came up elsewhere was using these to create charts and graphs in CSS, but this raises a question around responsiveness and scaling those angles and curves, though responsive skewing is mentioned in the GitHub issue.

Update January 6, 2023

This GitHub issue explains some more use cases for trigonometric functions.

I was surprised to see complex layouts on the list, but when discussing this with Jhey he mentioned using sin() to lay things out on a curve which could introduce some interesting layout possibility!

Here's a demo from Jhey (again, you'll need a browser that supports this feature or Chrome or Edge Canary with the experimental web platform features flag turned on.)

See the Pen Image Layout with CSS Trigonometric Functions ✨ [Tap to toggle] by Jhey (@jh3y) on CodePen.

Closing thoughts #

The addition of more math functions to CSS reduces some reliance on JavaScript which I view as a win. The primary use case for these seems to be easier shape creation and more options for building complex animations.

If you're building and maintaining an average website, I don't see these being overly useful, but I'd love to know if you have a use case for these functions. Let me know on Twitter or Mastodon.

Resources: #

• CSS Values and Units Modules Level 4: Trigonometric Functions

• Part 1: in CSS and JavaScript: Introduction to Trigonometry by Michelle Barker

• Part 2: Trigonometry in CSS and JavaScript: Getting Creative with Trigonometric Functions by Michelle Barker

• Part 3: Trigonometry in CSS and JavaScript: Beyond Triangles by Michelle

---

Want to keep in touch? Sign up for my newsletter to stay up to date with my book (including sales), upcoming projects and events, and other bits about cool things on the web.