CSS-функція acos() — арккосинус числа як кут у градусах

HTML

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

<div id="result">
  <div class="block" data-value="0.1">acos(0.1)</div>
  <div class="block" data-value="0.3">acos(0.3)</div>
  <div class="block" data-value="0.5">acos(0.5)</div>
  <div class="block" data-value="0.7">acos(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(acos(0.1));
}

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

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

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

HTML

<h4 class="cap">1. Кут просто з числа</h4>
<div class="row">
    <div class="dial"><i class="a1"></i><b>acos(1)</b></div>
    <div class="dial"><i class="a2"></i><b>acos(0.5)</b></div>
    <div class="dial"><i class="a3"></i><b>acos(0)</b></div>
    <div class="dial"><i class="a4"></i><b>acos(-1)</b></div>
    <div class="dial bad"><i class="a5"></i><b>acos(2)</b></div>
</div>
<p class="note">Остання стрілка мала б показати «помилку» — а показує нуль:
    аргумент поза межами дає NaN, і кут обчислюється в 0deg.</p>

<h4 class="cap">2. Той самий кут у градієнті</h4>
<div class="row">
    <div class="cone c1"></div>
    <div class="cone c2"></div>
</div>
<p class="note">Ліворуч початок конуса задано як <code>from acos(1)</code> (нуль),
    праворуч — <code>from acos(0)</code> (чверть оберту).</p>

<h4 class="cap">3. Число назад із кута</h4>
<div class="bar"><span class="fill"></span></div>
<p class="note">Ширина смужки — <code>calc(200px * sin(acos(0.5)))</code>.</p>

<table id="report">
    <thead><tr><th>запис</th><th>обчислене значення</th><th>що це означає</th></tr></thead>
    <tbody></tbody>
</table>

CSS

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 6px;
}

.dial {
    width: 96px;
    text-align: center;
}

.dial i {
    display: block;
    width: 70px;
    height: 70px;
    margin: 0 auto 4px;
    border: 1px solid #b9c6d8;
    border-radius: 50%;
    background: linear-gradient(to top, #2f6fd0 0 50%, transparent 50% 100%) center / 4px 100% no-repeat, #f6f9ff;
}

.dial b {
    font: 700 .82rem monospace;
    color: #1d3a6b;
}

.dial.bad b {
    color: #b23a3a;
}

.a1 { rotate: acos(1); }
.a2 { rotate: acos(0.5); }
.a3 { rotate: acos(0); }
.a4 { rotate: acos(-1); }
.a5 { rotate: acos(2); }

.cone {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.c1 { background: conic-gradient(from acos(1), #2f6fd0, #3a9a4f, #d1a04a, #2f6fd0); }
.c2 { background: conic-gradient(from acos(0), #2f6fd0, #3a9a4f, #d1a04a, #2f6fd0); }

.bar {
    width: 200px;
    height: 18px;
    border: 1px solid #b9c6d8;
    background: #f6f9ff;
}

.fill {
    display: block;
    width: calc(200px * sin(acos(0.5)));
    height: 100%;
    background: #3a9a4f;
}

table {
    margin-top: 14px;
    border-collapse: collapse;
    font-size: .88rem;
}

th,
td {
    padding: 4px 9px;
    border: 1px solid #b9c6d8;
    text-align: left;
}

th {
    background: #eef4ff;
}

.cap {
    margin: 22px 0 8px;
    font-size: 1rem;
    color: #5a6472;
}

.note {
    max-width: 560px;
    color: #5a6472;
    font-size: .9em;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}

JS

// читаємо ОБЧИСЛЕНІ значення прямо з елементів — саме їх бачить переглядач
const kut = (klas) => getComputedStyle(document.querySelector(klas)).rotate;

const RYADKY = [
    ['rotate: acos(1)', kut('.a1'), 'нуль: косинус одиниці — кут 0'],
    ['rotate: acos(0.5)', kut('.a2'), 'класика — рівно 60 градусів, не радіани'],
    ['rotate: acos(0)', kut('.a3'), 'чверть оберту'],
    ['rotate: acos(-1)', kut('.a4'), 'півоберту — максимум, який ця функція дає'],
    ['rotate: acos(2)', kut('.a5'), '⚠️ поза межами: NaN, обчислене — 0deg, помилки немає'],
    ['width: calc(200px * sin(acos(0.5)))', getComputedStyle(document.querySelector('.fill')).width,
        'кут повернули в sin() і дістали ЧИСЛО 0.866'],
];

const tbody = document.querySelector('#report tbody');
for (const r of RYADKY) {
    const row = tbody.insertRow();
    for (const v of r) {
        row.insertCell().textContent = v;
    }
}

console.log('acos(1)   ->', kut('.a1')); // → 0deg
console.log('acos(0.5) ->', kut('.a2')); // → 60deg
console.log('acos(0)   ->', kut('.a3')); // → 90deg
console.log('acos(-1)  ->', kut('.a4')); // → 180deg
console.log('acos(2)   ->', kut('.a5'), '— мовчазний нуль замість помилки'); // → 0deg

// що переглядач узагалі приймає
console.log('width: acos(0.5) валідне?', CSS.supports('width', 'acos(0.5)')); // → false
console.log('rotate: acos(0.5deg) валідне?', CSS.supports('rotate', 'acos(0.5deg)')); // → false
console.log('rotate: acos(2) валідне?', CSS.supports('rotate', 'acos(2)'),
    '— синтаксис правильний, результат безглуздий'); // → true
console.log('rotate: acos(1 / 2) валідне?', CSS.supports('rotate', 'acos(1 / 2)')); // → true