Table of contents
Trigonometry can be intimidating but it gives developers superpowers when it comes to creative coding. CSS has trigonometric functions that help you create more complex styles for your website or application.
Overview
CSS trigonometric functions are: sin()
, cos()
, tan()
, asin()
, acos()
, atan()
and atan2()
. These functions help developers style complex layouts without JavaScript. This will result in faster load time because there is no need to load JavaScript.
/* sin */
width: calc(50px * sin(90deg));
width: calc(50px * sin(0.125turn));
width: calc(50px * sin(1.0471967rad));
width: calc(100px * sin(63.673));
width: calc(100px * sin(2 * 0.125));
width: calc(100px * sin(pi / 3));
width: calc(100px * sin(e / 4));
/* asin */
transform: skewX(asin(0.5);
transform: rotate(asin(-0.3));
transform: rotate(asin(2 * 0.125));
transform: rotate(asin(pi / 5));
transform: rotate(asin(e / 3));
/* tan */
width: calc(100px * tan(45deg));
width: calc(100px * tan(0.25turn));
width: calc(100px * tan(2.0944rad));
width: calc(100px * tan(0.5773502));
width: calc(100px * tan(1.732 – 1));
width: calc(200px * tan(pi / 5));
width: calc(50px * tan(e * 3));
/* atan */
transform: rotate(atan(2));
transform: rotate(atan(3 * 50));
transform: rotate(atan(pi / 3));
transform: rotate(atan(e * 5));
Browser support
Firefox >= 108
and Safari >= 15.4
support CSS trigonometric functions. Chrome will add support in version 111.