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
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
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?"
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 #
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.
CSS Values and Units Modules Level 4: Trigonometric Functions
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.