Explore the practical applications of CSS trigonometry functions in this 19-minute video tutorial. Learn how to use sin() and cos() for creative layouts and animations. Start with basic styling for outer circles, then progress to advanced positioning techniques using trigonometric functions. Discover how to improve code efficiency with custom properties and Sass/SCSS loops. Finally, apply sin() and cos() for creating dynamic animation delays. Gain valuable insights into real-world usage of CSS trigonometry and enhance your web design skills.
Overview
Syllabus
- Introduction
- A use case for sin and cos in CSS
- What we are starting with
- Basic styling for the outer circles
- Getting the outer circles centered
- Positioning the outer circles with magic numbers
- Positioning with sin and cos
- Improving things with custom properties
- Speeding things up with a Sass/SCSS loop
- Using sin and cos for animation delays
Taught by
Kevin Powell
