CSS cos() — косинус кута
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Функція
автор: Bondcos()може бути корисною для створення анімаційних ефектів, рухливих графіків або трансформацій, які залежать від зміни кута. - Нотатка
-
Переконайтеся, що вказуєте одиниці виміру для кута, які відповідають вашим потребам. Наприклад, якщо ви працюєте з градусами, використовуйте
автор: Bonddeg, а якщо з радіанами -rad. - Нотатка
-
Косинус - це математична функція, яка приймає кут як вхідний параметр і повертає значення в діапазоні від
автор: Bond-1до1.
Синтаксис
cos(angle);Функція cos може отримувати єдине значення:
-
<angle> -
Може бути виражений в градусах (
автор: Bonddeg), радіанах (rad), градах (grad) або оборотах (turn).
| Значення без задання: | none |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 111 | 108 | 15.4 | 97 | 111 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 111 | 111 | 108 | 15.4 |
Приклади
+ запропонувати свій приклад у пісочниці
Використання функції cos() для визначення розмірів елементів
HTML
<div id="description">
<h2>Приклад 2</h2>
<p>Використання функції cos() для визначення розмірів елементів</p>
</div>
<div id="result">
<div class="box"></div>
<div class="box transformed"></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: 100px;
height: 100px;
background: blue;
margin: 10px;
}
.transformed {
width: calc(100px * cos(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(cos(0.25turn) * 1s);
}
@keyframes myAnimation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}Вісім міток розставлено по колу однією парою правил: горизонтальну координату рахує cos(), вертикальну — sin(). Кут кожної мітки — її номер, помножений на 45deg; жодного скрипта й жодних окремих координат у розмітці.
HTML
<div class="circle">
<span class="dot">0</span>
<span class="dot">1</span>
<span class="dot">2</span>
<span class="dot">3</span>
<span class="dot">4</span>
<span class="dot">5</span>
<span class="dot">6</span>
<span class="dot">7</span>
</div>CSS
body {
font-family: sans-serif;
font-size: 15px;
padding: 24px;
}
.circle {
position: relative;
width: 240px;
height: 240px;
margin: 20px;
border: 1px dashed #cfd4d9;
border-radius: 50%;
}
.dot {
--angle: calc(var(--i) * 45deg);
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin: -15px;
border-radius: 50%;
background: #2f6f9f;
color: #fff;
font-size: 13px;
left: calc(50% + cos(var(--angle)) * 100px);
top: calc(50% + sin(var(--angle)) * 100px);
}
.dot:nth-child(1) { --i: 0; }
.dot:nth-child(2) { --i: 1; }
.dot:nth-child(3) { --i: 2; }
.dot:nth-child(4) { --i: 3; }
.dot:nth-child(5) { --i: 4; }
.dot:nth-child(6) { --i: 5; }
.dot:nth-child(7) { --i: 6; }
.dot:nth-child(8) { --i: 7; }Коментарі
Коментарів ще немає — будьте першим!