Skip to content

Instantly share code, notes, and snippets.

@dotproto dotproto/index.css forked from stereokai/index.css
Created Jul 10, 2018

Embed
What would you like to do?
Trigonometry in 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));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.