Тег transform в CSS: опис, синтаксис та приклади використання
Тег transform в CSS дозволяє масштабувати, обертати, зсувати, нахиляти та комбінувати трансформації елементів.
Синтаксис
transform: <функція> [<функція>]* | none
Значення
- функція
- Функція трансформації.
- none
- Скасовує трансформацію.
Функції трансформації
matrix
Задає матрицю перетворень.
rotate
Обертає елемент на заданий кут відносно точки перетворення.
transform: rotate(<кут>)
scale
Масштабує елемент по горизонталі та вертикалі.
transform: scale(sx[, sy]);
Значення більше 1 збільшує масштаб, менше 1 — зменшує.
scaleX
Масштабує елемент по горизонталі.
transform: scaleX(sx);
scaleY
Масштабує елемент по вертикалі.
transform: scaleY(sy);
skewX
Нахиляє елемент вертикально на заданий кут.
transform: skewX(<кут>)
skewY
Нахиляє елемент горизонтально на заданий кут.
transform: skewY(<кут>)
translate
Зсуває елемент по горизонталі та вертикалі.
transform: translate(tx[, ty])
translateX
Зсуває елемент по горизонталі.
transform: translateX(tx)
translateY
Зсуває елемент по вертикалі.
transform: translateY(ty)
Браузери
Internet Explorer 9, Chrome, Opera, Safari, Firefox, Android та iOS підтримують тег transform в CSS.