CSS sin() — синус кута
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Переконайтеся, що вказуєте одиниці виміру для кута, які відповідають вашим потребам. Наприклад, якщо ви працюєте з градусами, використовуйте
автор: Bonddeg, а якщо з радіанами -rad. - Порада
-
Функція
автор: Bondsin()може бути корисною для створення анімаційних ефектів, рухливих графіків або трансформацій, які залежать від зміни кута. - Нотатка
-
Синус - це математична функція, яка приймає кут як вхідний параметр і повертає значення в діапазоні від
автор: Bond-1до1.
Синтаксис
sin(angle);Функція sin може отримувати єдине значення:
-
<angle> -
Може бути виражений в градусах (
автор: Bonddeg), радіанах (rad), градах (grad) або оборотах (turn).
| Значення без задання: | none |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 111 | 108 | 15.4 | 97 | 111 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 111 | 111 | 108 | 15.4 |
Приклади
+ запропонувати свій приклад у пісочниці
Використання функції sin() для задання розмірів елементів
HTML
<div id="description">
<h2>Приклад 2</h2>
<p>Використання функції sin() для задання розмірів елементів</p>
</div>
<div id="result">
<div class="box"></div>
<div class="box transformed"></div>
</div>CSS
#description {
background: #ccc;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.box {
width: 100px;
height: 100px;
background: blue;
margin: 10px;
}
.transformed {
width: calc(100px * sin(45deg));
}Елемент, що змінюється за допомогою анімації (під час перезавантаження сторінки)
HTML
<div id="description">
<h2>Приклад 1</h2>
<p>Елемент, що змінюється за допомогою анімації (під час перезавантаження сторінки)</p>
</div>
<div id="result">
<div class="box"></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: center;
align-items: center;
height: 200px;
}
.box {
width: 200px;
height: 200px;
background: blue;
animation-name: myAnimation;
animation-duration: calc(sin(0.25turn) * 1s);
}
@keyframes myAnimation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}Дванадцять крапок розставлено по колу без жодного скрипта: cos() дає зсув по горизонталі, sin() — по вертикалі, а номер крапки перетворюється на кут множенням у calc().
HTML
<div id="description">
<h2>Розкладка по колу на cos() і sin()</h2>
<p>Кожна крапка має лише свій номер --i. Кут рахується як --i * 30deg, а зсув — множенням синуса й косинуса на радіус.</p>
</div>
<div id="result">
<div class="circle">
<span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span>
</div>
</div>CSS
#description {
font-style: italic;
line-height: 1.5;
margin-bottom: 30px;
padding: 12px 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
#result {
display: flex;
justify-content: center;
padding: 20px 0;
}
.circle {
position: relative;
width: 220px;
height: 220px;
border: 1px dashed #c9c9c9;
border-radius: 50%;
}
.circle span {
--angle: calc(var(--i) * 30deg);
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border-radius: 50%;
background: #2f6fed;
transform: translate(calc(cos(var(--angle)) * 90px), calc(sin(var(--angle)) * 90px));
}
.circle span:nth-child(1) { --i: 0; background: #e11d48; }
.circle span:nth-child(2) { --i: 1; }
.circle span:nth-child(3) { --i: 2; }
.circle span:nth-child(4) { --i: 3; background: #16a34a; }
.circle span:nth-child(5) { --i: 4; }
.circle span:nth-child(6) { --i: 5; }
.circle span:nth-child(7) { --i: 6; }
.circle span:nth-child(8) { --i: 7; }
.circle span:nth-child(9) { --i: 8; }
.circle span:nth-child(10) { --i: 9; }
.circle span:nth-child(11) { --i: 10; }
.circle span:nth-child(12) { --i: 11; }Коментарі
Коментарів ще немає — будьте першим!