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
css
/* Single <angle> values */
width: calc(100px * sin(45deg));
width: calc(100px * sin(0.25turn));
width: calc(100px * sin(1.0471967rad));
/* 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
Return value
The sine of an angle
will always return a number between −1
and 1
.
- If
angle
isinfinity
,-infinity
, orNaN
, the result isNaN
. - If
angle
is0⁻
, the result is0⁻
.
Formal syntax
Examples
Changing box sizes
In this example, sin(30deg)
will return 0.5
, making the box have a 50px
width and a 50px
height.
css
div {
background-color: red;
width: calc(sin(30deg) * 100px);
height: calc(sin(30deg) * 100px);
}
Controlling animation duration
Another use case is to control the animation-duration
, reducing the duration based on the sine value. In this case, the animation duration will be 1s
.
css
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