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
5.0 -webkit-

12.0
9.0 -ms-

16.0
3.5 -moz-

9.0
4.0 -webkit-

23.0
15.0 -o-
12.1
11.5 -o-

12.0

Переглядач
transform

2.1 -webkit-

16.0
3.5 -moz-

9.2
4.0 -webkit-


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад застосування властивості transform

Простий приклад роботи властивості

Обертання елементу

div { 


  -ms-transform: rotate(7deg); /* IE 9 */ 


  -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */ 


  transform: rotate(7deg); 


}

Додаткові посилання