atan2

Description
Syntax
Examples
Links

Description

The atan2 function for CSS computes the arctangent with two calculations and returns the result in radians.

Syntax

CSS

atan2()

Values

<atan2()> =
    atan2(
        <calc-sum>,
        <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 · arctangent

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: rotate(0);
            --myvar2: rotate(atan2(-90, -90));
            --myvar3: rotate(atan2(-1, -1));
            --myvar4: rotate(atan2(0, 0));
            --myvar5: rotate(atan2(1, 1));
            --myvar6: rotate(atan2(90, 90));
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
            width: 100px;
        }
        div:nth-of-type(1)
        {
            transform: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar4);
        }
        div:nth-of-type(5)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar5);
        }
        div:nth-of-type(6)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar6);
        }
    </style>
</head>
<body>
    <div>arctangent</div>
    <div>arctangent</div>
    <div>arctangent</div>
    <div>arctangent</div>
    <div>arctangent</div>
    <div>arctangent</div>
</body>
</html>

2 · +

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: rotate(0);
            --myvar2: rotate(atan2(-90 + 0.5, -90 + 0.5));
            --myvar3: rotate(atan2(-1 + 0.5, -1 + 0.5));
            --myvar4: rotate(atan2(0 + 0.5, 0 + 0.5));
            --myvar5: rotate(atan2(1 + 0.5, 1 + 0.5));
            --myvar6: rotate(atan2(90 + 0.5, 90 + 0.5));
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
            width: 100px;
        }
        div:nth-of-type(1)
        {
            transform: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar4);
        }
        div:nth-of-type(5)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar5);
        }
        div:nth-of-type(6)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar6);
        }
    </style>
</head>
<body>
    <div>+</div>
    <div>+</div>
    <div>+</div>
    <div>+</div>
    <div>+</div>
    <div>+</div>
</body>
</html>

3 · -

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: rotate(0);
            --myvar2: rotate(atan2(-90 - 0.5, -90 - 0.5));
            --myvar3: rotate(atan2(-1 - 0.5, -1 - 0.5));
            --myvar4: rotate(atan2(0 - 0.5, 0 - 0.5));
            --myvar5: rotate(atan2(1 - 0.5, 1 - 0.5));
            --myvar6: rotate(atan2(90 - 0.5, 90 - 0.5));
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
            width: 100px;
        }
        div:nth-of-type(1)
        {
            transform: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar4);
        }
        div:nth-of-type(5)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar5);
        }
        div:nth-of-type(6)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar6);
        }
    </style>
</head>
<body>
    <div>-</div>
    <div>-</div>
    <div>-</div>
    <div>-</div>
    <div>-</div>
    <div>-</div>
</body>
</html>

4 · *

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: rotate(0);
            --myvar2: rotate(atan2(-90 * 0.5, -90 * 0.5));
            --myvar3: rotate(atan2(-1 * 0.5, -1 * 0.5));
            --myvar4: rotate(atan2(0 * 0.5, 0 * 0.5));
            --myvar5: rotate(atan2(1 * 0.5, 1 * 0.5));
            --myvar6: rotate(atan2(90 * 0.5, 90 * 0.5));
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
            width: 100px;
        }
        div:nth-of-type(1)
        {
            transform: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar4);
        }
        div:nth-of-type(5)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar5);
        }
        div:nth-of-type(6)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar6);
        }
    </style>
</head>
<body>
    <div>*</div>
    <div>*</div>
    <div>*</div>
    <div>*</div>
    <div>*</div>
    <div>*</div>
</body>
</html>

5 · /

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: rotate(0);
            --myvar2: rotate(atan2(-90 / 0.5, -90 / 0.5));
            --myvar3: rotate(atan2(-1 / 0.5, -1 / 0.5));
            --myvar4: rotate(atan2(0 / 0.5, 0 / 0.5));
            --myvar5: rotate(atan2(1 / 0.5, 1 / 0.5));
            --myvar6: rotate(atan2(90 / 0.5, 90 / 0.5));
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
            width: 100px;
        }
        div:nth-of-type(1)
        {
            transform: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar4);
        }
        div:nth-of-type(5)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar5);
        }
        div:nth-of-type(6)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar6);
        }
    </style>
</head>
<body>
    <div>/</div>
    <div>/</div>
    <div>/</div>
    <div>/</div>
    <div>/</div>
    <div>/</div>
</body>
</html>

6 · JS

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: rotate(0);
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
            width: 100px;
        }
        div:nth-of-type(1)
        {
            transform: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar4);
        }
        div:nth-of-type(5)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar5);
        }
        div:nth-of-type(6)
        {
            background-image: linear-gradient(135deg, white, yellow);
            transform: var(--myvar6);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value=" ">arctangent</button>
    <button value=" + 0.5">+</button>
    <button value=" - 0.5">-</button>
    <button value=" * 0.5">*</button>
    <button value=" / 0.5">/</button>
    <div>atan2</div>
    <div>atan2</div>
    <div>atan2</div>
    <div>atan2</div>
    <div>atan2</div>
    <div>atan2</div>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            const mystyle = document.querySelector(":root").style;
            mystyle.setProperty('--myvar2', 'rotate(atan2(-90' + myproperty + ', -90' + myproperty + '))');
            mystyle.setProperty('--myvar3', 'rotate(atan2(-1' + myproperty + ', -1' + myproperty + '))');
            mystyle.setProperty('--myvar4', 'rotate(atan2(0' + myproperty + ', 0' + myproperty + '))');
            mystyle.setProperty('--myvar5', 'rotate(atan2(1' + myproperty + ', 1' + myproperty + '))');
            mystyle.setProperty('--myvar6', 'rotate(atan2(90' + myproperty + ', 90' + myproperty + '))');
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>