Кут angle в CSS — одиниці кута deg, rad, grad і turn
Задає кут нахилу або повороту. Позитивне значення визначається за годинниковою стрілкою, негативне - проти годинникової стрілки.
Синтаксис
Властивість: <кут>;
Кут може задаватися в наступних одиницях:
- В градусах. Після значення пишеться
deg. Повне коло дорівнює 360deg. - У градах. Позначається як
grad. Повне коло дорівнює 400grad, - В радіанах. Позначається як
rad. Повне коло дорівнює 2π або приблизно 6.2832rad. - У поворотах. Позначається як
turn. Одне коло дорівнює одному повороту і пишеться як 1turn.
Значення деяких кутів представлені в таблиці:
| Рисунок | Значення |
|---|---|
 | 90deg = 100grad = 0.25turn ≈ 1.5708rad |
 | 180deg = 200grad = 0.5turn ≈ 3.1416rad |
 | 270deg = 300grad = 0.75turn ≈ 4.7124rad |
 | -90deg = -100grad = -0.25turn ≈ -1.5708rad |
Загальний опис
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| angle | 2.0 | 3.6 | 4.0 | 12.0 | 12.0 | 9.0 |
| Переглядач |  |
 |
 |
|---|---|---|---|
| angle | 4.0 | 4.0 | 4.0 |
Приклади
+ запропонувати свій приклад у пісочниці
Кут задається числом з одиницею виміру: наведи курсор — блок повернеться на rotate(15deg).
HTML
<div class="block">Наведи на мене — я нахилюся на 15°</div>CSS
.block {
width: 220px;
padding: 16px;
background: #0172ad;
color: #fff;
transition: transform .3s;
}
.block:hover {
transform: rotate(15deg);
}Демонстація роботи значення.
HTML
<p>angle - задає кут нахилу або повороту.</p>CSS
body {
font-size: 20px;
background: #b05ced;
background: linear-gradient(-140deg, #b05ced, #2908e5 50%, #bce0ee);
}Динамічний приклад.
HTML
<div class="box">
<p>У цьому прикладі, Ви можете змінювати значення <strong>angle</strong>.</p>
<p>angle в даному прикладі визначає кут повороту фону елементу.</p>
<strong>angle: </strong>
<input type="range" class="input" id="deg" min="0" max="360" value="50" step="1" />deg
<strong>;</strong>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 20px;
line-height: 1.45;
height: 100vh;
padding: 16px;
}
.box {
background-color: #f7f7f7;
background: linear-gradient(-140deg, #b05ced, #2908e5 50%, #bce0ee);
padding: 16px;
}
.input {
position: relative;
bottom: -5px;
margin-right: 20px;
width: 75px;
}JS
document.querySelectorAll('#deg').forEach((el) => el.addEventListener('change', function () {
var deg = this.value;
var backValue = 'linear-gradient(' + deg + 'deg, #b05ced, #2908e5 50%, #bce0ee)';
document.querySelectorAll('.box').forEach((n) => n.style.setProperty('background', backValue));
}));Динамічний приклад.
HTML
<div class="box">
<p>У цьому прикладі, Ви можете змінювати значення <strong>angle</strong>.</p>
<p>angle в даному прикладі визначає кут повороту фону елементу.</p>
<strong>angle: </strong>
<input type="range" class="input" id="deg" min="0" max="360" value="50" step="1" />deg
<strong>;</strong>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 20px;
line-height: 1.45;
height: 100vh;
padding: 16px;
}
.box {
background-color: #f7f7f7;
background: linear-gradient(-140deg, #b05ced, #2908e5 50%, #bce0ee);
padding: 16px;
}
.input {
position: relative;
bottom: -5px;
margin-right: 20px;
width: 75px;
}JS
document.querySelectorAll('#deg').forEach((el) => el.addEventListener('change', function () {
var deg = this.value;
var backValue = 'linear-gradient(' + deg + 'deg, #b05ced, #2908e5 50%, #bce0ee)';
document.querySelectorAll('.box').forEach((n) => n.style.setProperty('background', backValue));
}));Перший ряд: чотири однакові повороти, записані в чотирьох різних одиницях, і п’ята плашка з rotate(45) без одиниці — вона єдина лишилася рівною. Другий ряд: linear-gradient з кутом і словами to top / to right — пари збігаються попарно. Третій: конічний градієнт і hue-rotate у градусах та обертах.
HTML
<h4>Одне й те саме, чотирма одиницями</h4>
<div class="row">
<div class="tile deg">45deg</div>
<div class="tile grad">50grad</div>
<div class="tile rad">0.785rad</div>
<div class="tile turn">0.125turn</div>
<div class="tile none">rotate(45)</div>
</div>
<p class="note">Остання плашка не повернулася зовсім: без одиниці браузер
викидає всю декларацію, мовчки й без попереджень.</p>
<h4>Кут у градієнті: 0deg — це вгору</h4>
<div class="row">
<div class="bar g0">0deg</div>
<div class="bar gtop">to top</div>
<div class="bar g90">90deg</div>
<div class="bar gright">to right</div>
<div class="bar g180">180deg</div>
<div class="bar gplain">без кута</div>
</div>
<p class="note">Пари збігаються: 0deg = to top, 90deg = to right,
180deg = to bottom = типове значення.</p>
<h4>Де ще трапляються кути</h4>
<div class="row">
<div class="pie">conic 0deg</div>
<div class="pie shifted">conic from 45deg</div>
<div class="swatch">без фільтра</div>
<div class="swatch hue-deg">hue-rotate(180deg)</div>
<div class="swatch hue-turn">hue-rotate(0.5turn)</div>
<div class="tile skew">skewX(20deg)</div>
</div>CSS
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 22px;
margin-bottom: 6px;
padding: 16px 12px;
}
.tile {
width: 84px;
padding: 14px 0;
border-radius: 6px;
background: #2f6fd0;
color: #fff;
font-size: .85em;
text-align: center;
}
.deg {
transform: rotate(45deg);
}
.grad {
transform: rotate(50grad);
}
.rad {
transform: rotate(0.7853981634rad);
}
.turn {
transform: rotate(0.125turn);
}
.none {
background: #d64545;
transform: rotate(45);
}
.skew {
background: #7a2f96;
transform: skewX(20deg);
}
.bar {
width: 84px;
padding: 22px 0;
border-radius: 4px;
color: #fff;
font-size: .85em;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.g0 {
background-image: linear-gradient(0deg, #f2b134, #2f6fd0);
}
.gtop {
background-image: linear-gradient(to top, #f2b134, #2f6fd0);
}
.g90 {
background-image: linear-gradient(90deg, #f2b134, #2f6fd0);
}
.gright {
background-image: linear-gradient(to right, #f2b134, #2f6fd0);
}
.g180 {
background-image: linear-gradient(180deg, #f2b134, #2f6fd0);
}
.gplain {
background-image: linear-gradient(#f2b134, #2f6fd0);
}
.pie {
width: 84px;
height: 84px;
border-radius: 50%;
background-image: conic-gradient(#f2b134 0deg 90deg, #2f6fd0 90deg 360deg);
color: #fff;
font-size: .75em;
text-align: center;
line-height: 84px;
}
.shifted {
background-image: conic-gradient(from 45deg, #f2b134 0deg 90deg, #2f6fd0 90deg 360deg);
}
.swatch {
width: 84px;
padding: 22px 0;
border-radius: 6px;
background: #f2b134;
color: #333;
font-size: .78em;
text-align: center;
}
.hue-deg {
filter: hue-rotate(180deg);
}
.hue-turn {
filter: hue-rotate(0.5turn);
}
.note {
max-width: 560px;
margin: 0 0 4px;
color: #5a6472;
font-size: .9em;
}
h4 {
margin-top: 20px;
margin-bottom: 0;
}Коментарі
Коментарів ще немає — будьте першим!