angle CSS значення
Задає кут нахилу або повороту. Позитивне значення визначається за годинниковою стрілкою, негативне - проти годинникової стрілки.
Синтаксис
Властивість: <кут>;
Кут може задаватися в наступних одиницях:
- В градусах. Після значення пишеться
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 |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| 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);
}
Демонстація роботи значення.
Динамічний приклад.
Динамічний приклад.
Коментарі
Коментарів ще немає — будьте першим!