Senior LevelCSS & Modern Layouts
How do CSS trigonometric functions (sin(), cos(), tan()) enable circular layouts?
❓ Interview Prompt: Explain CSS math functions for positioning elements in circular patterns without JavaScript.
CSS now supports trigonometric functions directly in calc() expressions:
•
sin(angle), cos(angle), tan(angle)•
asin(), acos(), atan(), atan2()Use Case: Circular Menu
Position N items evenly around a circle by calculating x/y coordinates:
•
x = radius × cos(angle)
•
y = radius × sin(angle)
Where angle = (360deg / N) × index.
Code Implementation Example
css
/* 6 items arranged in a circle */
.circle-menu {
--items: 6;
--radius: 120px;
position: relative;
width: calc(var(--radius) * 2);
height: calc(var(--radius) * 2);
}
.circle-menu > * {
position: absolute;
top: 50%;
left: 50%;
--angle: calc(360deg / var(--items) * var(--i));
translate:
calc(cos(var(--angle)) * var(--radius) - 50%)
calc(sin(var(--angle)) * var(--radius) - 50%);
}💡Pure CSS circular menu layout using sin() and cos().
🎯 Interview Key Takeaway
CSS trig functions enable circular, radial, and wave layouts without JavaScript position calculations.
#Trigonometry#Math Functions#Layout#Senior
Back to all CSS & Modern Layouts Questions→