# sin()

The `sin()` CSS function is a trigonometric function that returns the sine of a number, which is a value between `-1` and `1`. The function contains a single calculation that must resolve to either a `<number>` or an `<angle>` by interpreting the result of the argument as radians. That is, `sin(45deg)`, `sin(0.125turn)`, and `sin(3.14159 / 4)` all represent the same value, approximately `0.707`.

## Syntax

``````/* Single <angle> values */
width: calc(100px * sin(45deg));
width: calc(100px * sin(0.25turn));

/* Single <number> values */
width: calc(100px * sin(63.673));
width: calc(100px * sin(2 * 0.125));

/* Other values */
width: calc(100px * sin(pi / 2));
width: calc(100px * sin(e / 4));
``````

### Parameter

The `sin(angle)` function accepts only one value as its parameter.

`angle`

A calculation which resolves to a `<number>` or an `<angle>`. When specifying unitless numbers they are interpreted as a number of radians, representing an `<angle>`

### Return value

The sine of an `angle` will always return a number between `−1` and `1`.

• If `angle` is `infinity`, `-infinity`, or `NaN`, the result is `NaN`.
• If `angle` is `0⁻`, the result is `0⁻`.

### Formal syntax

`<sin()> =   sin( <calc-sum> )  <calc-sum> =   <calc-product> [ [ '+' | '-' ] <calc-product> ]*  <calc-product> =   <calc-value> [ [ '*' | '/' ] <calc-value> ]*  <calc-value> =   <number>         |  <dimension>      |  <percentage>     |  <calc-constant>  |  ( <calc-sum> )   <calc-constant> =   e          |  pi         |  infinity   |  -infinity  |  NaN        `

## Examples

### Boxes Size

For example, when creating a 100x100 box based on external parameters, in this case `sin(90deg)`. Thus `sin(90deg)` will return `1` making the box `100px` width and `100px` height.

``````div {
background-color: red;
width: calc(sin(90deg) * 100px);
height: calc(sin(90deg) * 100px);
}
``````

### Controlling Animation Duration

Another use-case is to control the `animation-duration`. Reducing duration based on the sine value. In this case, the animation duration will be `1s`.

``````div {
animation-name: myAnimation;
animation-duration: calc(sin(0.25turn) * 1s);
}
``````

## Specifications

Specification
CSS Values and Units Module Level 4
# trig-funcs

## Browser compatibility

BCD tables only load in the browser