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.