sin() CSS function
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.
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.
Try it
transform: translateX(calc(cos(0deg) * 140px))
translateY(calc(sin(0deg) * -140px));
transform: translateX(calc(cos(90deg) * 140px))
translateY(calc(sin(90deg) * -140px));
transform: translateX(calc(cos(135deg) * 140px))
translateY(calc(sin(135deg) * -140px));
transform: translateX(calc(cos(180deg) * 140px))
translateY(calc(sin(180deg) * -140px));
transform: translateX(calc(cos(-45deg) * 140px))
translateY(calc(sin(-45deg) * -140px));
<div class="circle">
<span class="dot" id="example-element"></span>
</div>
:root {
--radius: 140px;
--dot-size: 10px;
}
.circle {
display: grid;
place-content: center;
margin: 0 auto;
width: calc(var(--radius) * 2);
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid #666666;
background-image:
radial-gradient(black var(--dot-size), transparent var(--dot-size)),
linear-gradient(135deg, blue, deepskyblue, lightgreen, lavender, honeydew);
}
.dot {
display: block;
width: var(--dot-size);
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid #666666;
background-color: #ff6666;
transform: translateX(calc(cos(0deg) * var(--radius)))
translateY(calc(sin(0deg) * var(--radius) * -1));
}
Syntax
/* 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));
Parameters
The sin(angle) function accepts only one value as its parameter.
Return value
The sine of an angle will always return a number between −1 and 1.
- If
angleisinfinity,-infinity, orNaN, the result isNaN. - If
angleis0⁻, the result is0⁻.
Formal syntax
<sin()> =
sin( <calc-sum> )
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> =
<calc-value> [ [ '*' | / ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
Examples
Changing box sizes
In this example, sin(30deg) will return 0.5, making the box have a 50px width and a 50px height.
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.
div {
animation-name: myAnimation;
animation-duration: calc(sin(0.25turn) * 1s);
}
Specifications
| Specification |
|---|
| CSS Values and Units Module Level 4 # trig-funcs |