CSS mod() — залишок від ділення

Опис

правити

Загальний опис

правити

Порада

Функція mod() може бути особливо корисною при роботі зі списками або генеруванні анімацій, де вам потрібно змінювати стилі на основі позицій елементів.

автор: NagarD правити

Нотатка

Для mod(): знак другого параметра функції визначає знак залишку від ділення, тобто якщо цей параметр буде від'ємним, то і результат виконання функції буде від'ємним. Приклад:

```
rotate: mod(-70deg, 20deg); /* 10deg */
```

Для rem(): знак першого параметра функції визначає знак залишку від ділення, тобто якщо цей параметр буде від'ємним, то і результат виконання функції буде від'ємним. Приклад:

```
rotate: rem(-90deg, 20deg); /* -10deg */
```

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

mod(<number1>, <number2>);

Функція mod може отримувати 2 значень:

<number1>

Числове значення, перше число для обчислення залишку від ділення.

автор: NagarD

правити

<number2>

Числове значення, друге число для обчислення залишку від ділення.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	125	118	15.4	111	125	—

Підтримка: мобільні переглядачі

Переглядач
	125	125	118	15.4

Приклади

+ запропонувати свій приклад у пісочниці

<div id="description">
  <h2>Знак результату: mod() проти rem()</h2>
  <p>Однакове ділення, різний знак залишку. Нижня смужка без зсуву — для порівняння.</p>
</div>

<div id="result">
  <div class="field">
    <div class="bar m"></div>
    <p>margin-left: mod(-70px, 50px) → 30px, зсув вправо</p>
    <div class="bar r"></div>
    <p>margin-left: rem(-70px, 50px) → -20px, зсув уліво</p>
    <div class="bar z"></div>
    <p>margin-left: 0 — вихідне положення</p>
  </div>
</div>

#description {
  background: #f2f2f2;
  padding: 20px;
  font-family: Arial, sans-serif;
}

#result {
  padding: 24px;
  font-family: Arial, sans-serif;
}

.field {
  border: 2px dashed #999;
  padding: 16px 16px 16px 70px;
}

.bar {
  width: 170px;
  height: 26px;
  background: #ff6347;
  border-radius: 4px;
}

.m { margin-left: mod(-70px, 50px); }
.r { margin-left: rem(-70px, 50px); }
.z { margin-left: 0; }

#result p {
  margin: 6px 0 16px;
  font-size: 13px;
  color: #555;
}