Created
June 18, 2017 11:03
-
-
Save stereokai/7666bfe93929b14c2dced148c79e0e97 to your computer and use it in GitHub Desktop.
Trigonometry in CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//----------------------------------*\ | |
// 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
Thanks! I'll check that out.
The 100vw was just for demonstration purposes - it will be given in px, taken from the browser window width at that moment. Maybe easier to see what I mean here: https://www.franzk.net
Resize the window - of course, this site just mimics the behavior I want, using a partially white PNG sliver bg and a lot of media queries to adjust the modules below ;). It would be cool to adjust the angle of the whole header and the modules below the header dynamically.
Besides the jumping when resizing the window, the biggest problem is that my header is a rectangle, and so there are parts on the right, underneath it, that are visible but not clickable.