W3cubDocs

/CSS

sin()

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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( sin(45deg) * 100px );
width: calc( sin(0.25turn) * 100px );
width: calc( sin(1.0471967rad) * 100px );

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

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

The sin() function takes only one expression as its argument.

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
sin
No
No
103
No
No
15.4
No
No
No
No
15.4
No

See also

© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/sin