Trigonometry in CSS

index.css

//----------------------------------*\
// TRIGONOMETRY FUNCTIONS
//----------------------------------*/

// # Trigonometry in CSS
// 
// - Through Taylor/Maclaurin polynomial representation: http://people.math.sc.edu/girardi/m142/handouts/10sTaylorPolySeries.pdf
// - Useful if you don't want to use JS.
// - With CSS Variables.
// - `calc()` can't do power (x ^ y) so I used multiplication instead.

// `--angle` is in radians! Convert from degrees using `α * π / 180` (or `α * 0.01745329251`) :)

// Sine function representation
.sin {
  --sin-term1: var(--angle);
  --sin-term2: calc((var(--angle) * var(--angle) * var(--angle)) / 6);
  --sin-term3: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 120);
  --sin-term4: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 5040);
  --sin-term5: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 362880);
  --sin: calc(var(--sin-term1) - var(--sin-term2) + var(--sin-term3) - var(--sin-term4) + var(--sin-term5));
}

// Cosine function representation
.cos {
  --cos-term1: 1;
  --cos-term2: calc((var(--angle) * var(--angle)) / 2);
  --cos-term3: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 24);
  --cos-term4: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 720);
  --cos-term5: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 40320);
  --cos: calc(var(--cos-term1) - var(--cos-term2) + var(--cos-term3) - var(--cos-term4) + var(--cos-term5));
}

// Tangent function representation
.tan {
  --tan-term1: var(--angle);
  --tan-term2: calc((1/3) * var(--angle) * var(--angle) * var(--angle));
  --tan-term3: calc((2 / 15) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle));
  --tan-term4: calc((17/315) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle));
  --tan: calc(var(--tan-term1) + var(--tan-term2) + var(--tan-term3) + var(--tan-term4));
}