asin() в CSS — арксинус, що повертає кут для rotate

Опис

автор: Bond

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

автор: NagarD

Порада

Переконайтеся, що вхідне число знаходиться в діапазоні від -1 до 1. Використання чисел поза цим діапазоном призведе до недійсних значень.

автор: Bond
Порада

Результатом функції asin() є число в радіанах. Якщо вам потрібно вивести результат у градусах, використовуйте функцію deg() для конвертації радіанів в градуси.

автор: Bond

Синтаксис

asin(number);

Функція asin може отримувати єдине значення:

<number>

Числове значення, для якого потрібно обчислити обернений синус. Значення має бути в межах від -1 до 1.

автор: Bond

Значення без задання: none

Переглядачі

Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
111 108 15.4 97 111 —
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
111 111 108 15.4

Приклади

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

Блоки, що обертаються за допомогою функції asin()

HTML

<div id="description">
  <h2>Приклад 1</h2>
  <p>Блоки, що обертаються за допомогою функції asin()</p>
</div>

<div id="result">
  <div class="block" data-value="0.1">asin(0.1)</div>
  <div class="block" data-value="0.3">asin(0.3)</div>
  <div class="block" data-value="0.5">asin(0.5)</div>
  <div class="block" data-value="0.7">asin(0.7)</div>
</div>

CSS

#description {
  font-style: italic;
  text-align: left;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

#result {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.block {
  width: 100px;
  height: 100px;
  background: blue;
  margin: 10px;
  color: white;
  text-align: center;
  line-height: 100px;
}

.block[data-value="0.1"] {
  transform: rotate(asin(0.1));
}

.block[data-value="0.3"] {
  transform: rotate(asin(0.3));
}

.block[data-value="0.5"] {
  transform: rotate(asin(0.5));
}

.block[data-value="0.7"] {
  transform: rotate(asin(0.7));
}
автор: Bond

Перший ряд — стрілка, повернута на asin() від різних відношень: від −1 до 1 вона проходить усі кути від −90° до 90°. Другий ряд — пастка: кожній стрілці спершу задано rotate: 45deg, а наступним рядком — вираз із asin(). Де вираз дійсний, стрілка зрушила; де ні — лишилась на 45°. Видно, що asin(2) не відкидається, а тихо дає 0deg. Далі — кути в calc() і остання плитка, де width: asin(0.5) відкинуто.

HTML

<p class="head">rotate: asin(--v) — від −1 до 1 стрілка проходить усі кути
    від −90° до 90°:</p>
<div class="grid">
    <figure><div class="dial d1"><i></i></div><figcaption>asin(-1) → -90deg</figcaption></figure>
    <figure><div class="dial d2"><i></i></div><figcaption>asin(-0.5) → -30deg</figcaption></figure>
    <figure><div class="dial d3"><i></i></div><figcaption>asin(0) → 0deg</figcaption></figure>
    <figure><div class="dial d4"><i></i></div><figcaption>asin(0.5) → 30deg</figcaption></figure>
    <figure><div class="dial d5"><i></i></div><figcaption>asin(0.7071) → 44.9994deg</figcaption></figure>
    <figure><div class="dial d6"><i></i></div><figcaption>asin(1) → 90deg</figcaption></figure>
</div>

<p class="head">Кожній стрілці нижче спершу задано rotate: 45deg, а наступним
    рядком — вираз із asin(). Дійсний вираз зрушить стрілку, невалідний —
    буде відкинутий, і вона лишиться на 45°:</p>
<div class="grid">
    <figure><div class="dial warn d7"><i></i></div><figcaption>asin(2) — ДІЙСНЕ, стало 0deg</figcaption></figure>
    <figure><div class="dial warn d8"><i></i></div><figcaption>asin(-2) — ДІЙСНЕ, стало 0deg</figcaption></figure>
    <figure><div class="dial bad d9"><i></i></div><figcaption>asin(50%) — відкинуто, 45deg</figcaption></figure>
    <figure><div class="dial bad d10"><i></i></div><figcaption>asin(0.5px) — відкинуто, 45deg</figcaption></figure>
    <figure><div class="dial bad d11"><i></i></div><figcaption>asin(0.5, 1) — відкинуто, 45deg</figcaption></figure>
</div>

<p class="head">Результат — кут, тож він множиться й складається з іншими кутами:</p>
<div class="grid">
    <figure><div class="dial ok d12"><i></i></div><figcaption>calc(asin(0.5) * 3) → 90deg</figcaption></figure>
    <figure><div class="dial ok d13"><i></i></div><figcaption>calc(asin(0.5) + acos(0.5)) → 90deg</figcaption></figure>
    <figure><div class="dial ok d14"><i></i></div><figcaption>asin(sin(30deg)) → 30deg</figcaption></figure>
    <figure><div class="dial ok d15"><i></i></div><figcaption>asin(1/2) → 30deg</figcaption></figure>
</div>

<p class="head">А в довжину кут не покласти — оголошення відкинуто, і плитка
    лишилась завширшки 300px:</p>
<div class="grid">
    <span class="wbox wbad">width: asin(0.5)</span>
</div>

CSS

.head {
    margin: 20px 0 8px;
    max-width: 620px;
    color: #5a6472;
    font-size: .9em;
}

.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

figure {
    margin: 0;
    width: 128px;
}

figcaption {
    margin-top: 6px;
    color: #5a6472;
    font: 12px/1.35 ui-monospace, monospace;
}

.dial {
    position: relative;
    width: 120px;
    height: 120px;
    background: #f6f9ff;
    border: 1px solid #b9c6d8;
    border-radius: 50%;
}

.dial::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 59px;
    width: 100px;
    height: 2px;
    background: #d7dee8;
}

.dial i {
    position: absolute;
    left: 57px;
    top: 16px;
    width: 6px;
    height: 44px;
    background: #2f6fd0;
    transform-origin: bottom center;
}

.warn i { background: #e08a1e; }
.bad i { background: #d64545; }
.ok i { background: #3a9a4f; }

.d1 i { rotate: asin(-1); }
.d2 i { rotate: asin(-0.5); }
.d3 i { rotate: asin(0); }
.d4 i { rotate: asin(0.5); }
.d5 i { rotate: asin(0.7071); }
.d6 i { rotate: asin(1); }

.d7 i { rotate: 45deg; rotate: asin(2); }
.d8 i { rotate: 45deg; rotate: asin(-2); }
.d9 i { rotate: 45deg; rotate: asin(50%); }
.d10 i { rotate: 45deg; rotate: asin(0.5px); }
.d11 i { rotate: 45deg; rotate: asin(0.5, 1); }

.d12 i { rotate: calc(asin(0.5) * 3); }
.d13 i { rotate: calc(asin(0.5) + acos(0.5)); }
.d14 i { rotate: asin(sin(30deg)); }
.d15 i { rotate: asin(1/2); }

.wbox {
    display: flex;
    align-items: center;
    width: 300px;
    height: 44px;
    padding-left: 10px;
    background: #c9ced6;
    color: #333;
    font: 600 12px/1 ui-monospace, monospace;
}

.wbad { width: asin(0.5); }
автор: NagarD

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~		 Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень		 Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
[[!sandbox/S0oh1hBm]] Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком !: наберіть [[! і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```		 Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження		 Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox		 Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає		 Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.		 Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||		 Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Правка
Зворотний зв'язок
Вхід