Trigonometric Functions in CSS

Finally, CSS has introduced trigonometric functions. Here are the newly introduced ones:

• sin()

• cos()

• tan()

• asin()

• acos()

• atan()

• atan2()

These functions can be incredibly useful for a variety of reasons, including sizing elements, rotating elements, and laying out pages. More importantly, they should significantly reduce the use of JavaScript workarounds in your designs, resulting in cleaner and more efficient code.

Here's an excellent example from Jhey on Codepen demonstrating image layout using CSS Trigonometric functions:

Codepen example:

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