Функция CSS types.sin()

На чтение 4 мин Просмотров 41 Опубликовано 06.08.2023

Функция CSS sin() используется для вычисления синуса угла. Синус — это тригонометрическая функция, значение которой находится в диапазоне от −1 до 1. Он обычно используется в математике и компьютерной графике для представления периодического поведения. В CSS функцию sin() можно использовать в выражениях calc() для динамического вычисления значений таких свойств, как положение, размер и цвет.

Синтаксис:

/* angle values */
width: calc(100px * sin(30deg));
width: calc(100px * sin(0.15turn));
width: calc(100px * sin(1.0471967rad));

/* number values */
width: calc(100px * sin(90));
width: calc(100px * sin(2 * 5));

/* Other values */
width: calc(100px * sin(pi / 3));
width: calc(100px * sin(e / 5));

Параметр: функция принимает один параметр:

angle: угол в градусах или радианах, для которого вы хотите вычислить синус. В CSS углы могут быть указаны либо в градусах (например, 45 градусов), либо в радианах (например, 0,785398 рад).

Возвращаемое значение: возвращаемое значение функции CSS sin() представляет собой безразмерное число, представляющее синус указанного угла. Это значение можно использовать в выражениях CSS calc() для вычисления значений таких свойств, как ширина, высота и положение. Если значение угла находится между бесконечностью и -бесконечностью или NaN, то результатом будет NaN. Результат будет 0⁻, если угол равен 0⁻

Пример 1: Этот пример иллюстрирует динамическую ширину на основе синуса угла.

HTML

<!DOCTYPE html>

<html>

<head>

    <style>

        .box {

          height: 100px;

          background-color: green;

          position: absolute;

          top: 50px;

          left: 30%;

          transform: translateX(-50%);

          width: calc(100px * sin(30deg));

        }

    </style>

</head>

<body>

    <h1 style="color: green;">

          GeeksforGeeks

      </h1>

    <h2>sin() function</h2>

    <div class="box"></div>

</body>

</html>

Выход:

Пример 2: Этот пример иллюстрирует динамический цвет фона на основе синуса времени.

HTML

<!DOCTYPE html>

<html>

<head>

    <style>

        .box {

          width: 100px;

          height: 100px;

          position: absolute;

          top: 25%;

          left: 5%;

          transform: translate(-50%, -50%);

        }

    </style>

</head>

<body>

    <h1 style="color: green;">

        GeeksforGeeks

    </h1>

    <h2>sin() function</h2>

    <div class="box"

         id="box">

    </div>

    <script>

        setInterval(function() {

          let time = new Date().getTime() / 1000;

          let color = Math.floor(128 + 128 * Math.sin(time));

          document.getElementById("box").style.backgroundColor =

            `rgb(${color}, ${color}, ${color})`;

        }, 20);

    </script>

</body>

</html>

Выход:

Поддерживаемые браузеры: браузеры, поддерживаемые функцией sin(), перечислены ниже:

Firefox 16.0
Safari 15.4