9 Trigonometry for web developers

Trigonometry, the mathematics of angles and triangles, might seem too esoteric to be useful in frontend web development. But modern browsers now offer tools that enable anyone to use trigonometric concepts to create rich visual effects, dynamic layouts, and smooth animations. From using CSS to rotate or skew elements to using JavaScript to animate elements along a curved path, trig stalwarts such as sine, cosine, and tangent make these and other frontend effects easier to implement and customize to your design requirements.

9.1 The basics of trigonometry for web design

Before the code starts flying, let’s first take a step back and understand a few fundamentals for implementing trigonometric calculations in frontend web development work.

9.1.1 Sine, cosine, and tangent

Trigonometry is all about the relationships that exist within a triangle, particularly a right-angled triangle, where one of the angles is 90°, as shown in figure 9.1. The trig workhorses in frontend work are the three primary trig functions of sine (sin), cosine (cos), and tangent (tan). Each defines a relationship between an angle θ (theta) and the ratios of the triangle’s sides:

9.1.2 Trigonometric units

9.1.3 Converting between degrees and radians

9.1.4 The inverse trig functions

9.1.5 Trig functions in CSS and JavaScript

9.2 Circular layouts and animations

9.2.1 Creating a circular menu

9.2.2 Animating circular motion

9.2.3 Creating an animated spinner

9.3 Wave effects

9.3.1 Arranging elements along a wave path

9.3.2 Animating elements with a wave effect

9.3.3 Animating an element with a pendulum effect