css властивість transform
Властивість transform дозволяє застосовувати 2D або 3D трансформацію до елементу. Ця властивість дозволяє обертати, масштабувати, переміщувати, нахиляти елемент, тощо.
Властивість transform отримує в якості значень "трансформуючі функції". Ці функції виглядають як scale(), translateX(), rotate() тощо. Вони приймають параметри для визначення ступення трансформації.
Ви також можете задавати декілька функцій одночасно.
Якщо ця властивість приймає значення відмінне від none - створюється новий контекст накладення. В цьому випадку об'єкт буде поводитися як контейнер для нащадків з position: fixed;.
Синтаксис
transform: none|transform-functions|initial|inherit;Властивість transform може отримувати 24 значення:
noneСкасовує трансформацію. Без задання.
matrix(n,n,n,n,n,n)2D перетворення, за допомогою матрицю з шести значень.
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)3D перетворення, за допомогою матриці 4x4 з 16 значень.
translate(x,y)2D зсув по горизонталі і вертикалі.
translate3d(x,y,z)3D зсув по трьом вісям.
translateX(x)2D зсув по горизонталі (вісь X). Дозволені від'ємні значення. Додатне значення зсовує вправо, від'ємне вліво.
translateY(y)2D зсув по вертикалі (вісь Y). Дозволені від'ємні значення. Додатне значення зсовує вниз, від'ємне вверх.
translateZ(z)3D зсув по вісі Z. Дозволені від'ємні значення. Додатне значення зсовує вправо, від'ємне вліво.
scale(x,y)Масштабування елемента по горизонталі та вертикалі. Значення меньше 1 - зменшує елемент, більше - збільшує.
scale3d(x,y,z)Масштабування елемента тривимірному просторі.
scaleX(x)Масштабування елемента по горизонталі (вісь X).
scaleY(y)Масштабування елемента по вертикалі (вісь Y).
scaleZ(z)Маштабування елемента по вісі Z.
rotate(angle)Обертає елемент, на заданий кут, в двомірному просторі.
rotate3d(x,y,z,angle)Обертає елемент в тривимірному просторі.
rotateX(angle)3D обертання елемента по вісі Х.
rotateY(angle)3D обертання елемента по вісі Y.
rotateZ(angle)3D обертання елемента по вісі Z.
skew(x-angle,y-angle)2D перекіс двум вісям Х- та Y ( по горизонталі та вертикалі).
skewX(angle)2D перекіс по горизонталі (вісь Х).
skewY(angle)2D перекіс по вертикалі (вісь Y).
perspective(n)Перспективний вид для 3D трансформованого елемента.
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена).
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.transform="rotate(7deg)" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| transform | 36.0 |
12.0 |
16.0 |
9.0 |
23.0 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| transform | 2.1 -webkit- |
16.0 |
9.2 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад застосування властивості transform
Простий приклад роботи властивості
Обертання елементу
div {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}