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

Введение в PostCSS Программирование и разработка

Функция 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>

Выход:

Читайте также:  Что такое вектор в C++?

от пример иллюстрирует динамическую ширину

Пример 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
Оцените статью
bestprogrammer.ru
Добавить комментарий