CSS Trigonometric Functions
CSS Trigonometric Functions allow you to perform trigonometric calculations directly in CSS. This is particularly useful for animations, circular layouts, and complex geometric shapes without relying on JavaScript.
1. The Functions
The available functions correspond to standard trigonometry:
sin(angle): Returns the sine of an angle (value between -1 and 1).cos(angle): Returns the cosine of an angle (value between -1 and 1).tan(angle): Returns the tangent of an angle (value between -infinity and infinity).asin(number): Returns the arcsine (inverse sine) of a number.acos(number): Returns the arccosine (inverse cosine) of a number.atan(number): Returns the arctangent (inverse tangent) of a number.atan2(y, x): Returns the angle between the positive x-axis and the point (x, y).
2. Syntax
These functions work inside calc() or anywhere a <number> or <angle> is accepted.
/* Rotate an element based on a sine wave calculation */
transform: rotate(calc(sin(45deg) * 100deg));3. Use Case: Circular Layout
One of the most common uses is placing elements in a circle.
.circle-container {
position: relative;
width: 300px;
height: 300px;
}
.item {
position: absolute;
left: 50%;
top: 50%;
width: 50px;
height: 50px;
/* --angle is a custom property set on each item */
/* --radius is the distance from center */
--x: calc(cos(var(--angle)) * var(--radius));
--y: calc(sin(var(--angle)) * var(--radius));
transform: translate(var(--x), var(--y));
}4. Use Case: Animation
You can create complex motion paths using trig functions. By animating a custom property representing an angle, you can drive circular motion purely in CSS.
Note: Animating custom properties requires CSS.registerProperty or @property support to interpolate the values correctly.
programming/css/css programming/css/calc-function programming/css/css-variables