sin

Description
Syntax
Examples
Links

Description

The sin function for CSS computes the sine with a single calculation and returns the result in radians.

Syntax

CSS

sin()

Values

<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> )

<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<dimension>

A number with a unit.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<calc-constant> =
    e |
    pi |
    infinity |
    -infinity |
    NaN

The base of the natural logarithm, approximately equal to 2.7182818284590452354.

pi

The ratio of a circle's circumference to its diameter, approximately equal to 3.1415926535897932.

infinity

Positive infinity.

-infinity

Negative infinity.

NaN

Not a number.

Multiplication.

Division.

Addition.

Subtraction.

Examples

1 · sine

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: calc(100% * 0.5);
            --myvar2: calc(100% * sin(30deg));
            --myvar3: calc(100% * sin(0.5236rad));
            --myvar4: calc(100% * sin(0.0833turn));
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
        }
        div:nth-of-type(1)
        {
            width: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar4);
        }
    </style>
</head>
<body>
    <div>sine</div>
    <div>sine</div>
    <div>sine</div>
    <div>sine</div>
</body>
</html>

2 · +

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: calc(100% * 0.5);
            --myvar2: calc(100% * sin(30deg + 10deg));
            --myvar3: calc(100% * sin(0.5236rad + 10deg));
            --myvar4: calc(100% * sin(0.0833turn + 10deg));
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
        }
        div:nth-of-type(1)
        {
            width: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar4);
        }
    </style>
</head>
<body>
    <div>+</div>
    <div>+</div>
    <div>+</div>
    <div>+</div>
</body>
</html>

3 · -

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: calc(100% * 0.5);
            --myvar2: calc(100% * sin(30deg - 10deg));
            --myvar3: calc(100% * sin(0.5236rad - 10deg));
            --myvar4: calc(100% * sin(0.0833turn - 10deg));
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
        }
        div:nth-of-type(1)
        {
            width: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar4);
        }
    </style>
</head>
<body>
    <div>-</div>
    <div>-</div>
    <div>-</div>
    <div>-</div>
</body>
</html>

4 · *

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: calc(100% * 0.5);
            --myvar2: calc(100% * sin(30deg * 1.25));
            --myvar3: calc(100% * sin(0.5236rad * 1.25));
            --myvar4: calc(100% * sin(0.0833turn * 1.25));
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
        }
        div:nth-of-type(1)
        {
            width: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar4);
        }
    </style>
</head>
<body>
    <div>*</div>
    <div>*</div>
    <div>*</div>
    <div>*</div>
</body>
</html>

5 · /

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: calc(100% * 0.5);
            --myvar2: calc(100% * sin(30deg / 1.25));
            --myvar3: calc(100% * sin(0.5236rad / 1.25));
            --myvar4: calc(100% * sin(0.0833turn / 1.25));
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
        }
        div:nth-of-type(1)
        {
            width: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar4);
        }
    </style>
</head>
<body>
    <div>/</div>
    <div>/</div>
    <div>/</div>
    <div>/</div>
</body>
</html>

6 · JS

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: calc(100% * 0.5);
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
        }
        div:nth-of-type(1)
        {
            width: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar4);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value=" ">sine</button>
    <button value=" + 10deg">+</button>
    <button value=" - 10deg">-</button>
    <button value=" * 1.25">*</button>
    <button value=" / 1.25">/</button>
    <div>sin</div>
    <div>sin</div>
    <div>sin</div>
    <div>sin</div>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            const mystyle = document.querySelector(":root").style;
            mystyle.setProperty('--myvar2', 'calc(100% * sin(30deg' + myproperty + '))');
            mystyle.setProperty('--myvar3', 'calc(100% * sin(0.5236rad' + myproperty + '))');
            mystyle.setProperty('--myvar4', 'calc(100% * sin(0.0833turn' + myproperty + '))');
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>