css властивість transform
Властивість transform дозволяє застосовувати 2D або 3D трансформацію до елементу. Ця властивість дозволяє обертати, масштабувати, переміщувати, нахиляти елемент, тощо.
Властивість transform отримує в якості значень "трансформуючі функції". Ці функції виглядають як scale(), translateX(), rotate() тощо. Вони приймають параметри для визначення ступення трансформації.
Ви також можете задавати декілька функцій одночасно.
Якщо ця властивість приймає значення відмінне від none - створюється новий контекст накладення. В цьому випадку об'єкт буде поводитися як контейнер для нащадків з position: fixed;.
Синтаксис
transform: none|transform-functions|initial|inherit;Властивість transform може отримувати 24 значень:
-
none -
Скасовує трансформацію. Без задання.
автор: Svitlana -
matrix(n,n,n,n,n,n) -
2D перетворення, за допомогою матрицю з шести значень.
автор: Svitlana -
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) -
3D перетворення, за допомогою матриці 4x4 з 16 значень.
автор: Svitlana -
translate(x,y) -
2D зсув по горизонталі і вертикалі.
автор: Svitlana -
translate3d(x,y,z) -
3D зсув по трьом вісям.
автор: Svitlana -
translateX(x) -
2D зсув по горизонталі (вісь X). Дозволені від'ємні значення. Додатне значення зсовує вправо, від'ємне вліво.
автор: Svitlana -
translateY(y) -
2D зсув по вертикалі (вісь Y). Дозволені від'ємні значення. Додатне значення зсовує вниз, від'ємне вверх.
автор: Svitlana -
translateZ(z) -
3D зсув по вісі Z. Дозволені від'ємні значення. Додатне значення зсовує вправо, від'ємне вліво.
автор: Svitlana -
scale(x,y) -
Масштабування елемента по горизонталі та вертикалі. Значення меньше 1 - зменшує елемент, більше - збільшує.
автор: Svitlana -
scale3d(x,y,z) -
Масштабування елемента тривимірному просторі.
автор: Svitlana -
scaleX(x) -
Масштабування елемента по горизонталі (вісь X).
автор: Svitlana -
scaleY(y) -
Масштабування елемента по вертикалі (вісь Y).
автор: Svitlana -
scaleZ(z) -
Маштабування елемента по вісі Z.
автор: Svitlana -
rotate(angle) -
Обертає елемент, на заданий кут, в двомірному просторі.
автор: Svitlana -
rotate3d(x,y,z,angle) -
Обертає елемент в тривимірному просторі.
автор: Svitlana -
rotateX(angle) -
3D обертання елемента по вісі Х.
автор: Svitlana -
rotateY(angle) -
3D обертання елемента по вісі Y.
автор: Svitlana -
rotateZ(angle) -
3D обертання елемента по вісі Z.
автор: Svitlana -
skew(x-angle,y-angle) -
2D перекіс двум вісям Х- та Y ( по горизонталі та вертикалі).
автор: Svitlana -
skewX(angle) -
2D перекіс по горизонталі (вісь Х).
автор: Svitlana -
skewY(angle) -
2D перекіс по вертикалі (вісь Y).
автор: Svitlana -
perspective(n) -
Перспективний вид для 3D трансформованого елемента.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена).
автор: Svitlana
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.transform="rotate(7deg)" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 36 | 16 | 9 | 23 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 36 | 16 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
Верхній блок повернуто на 7° — трансформація не чіпає сусідів: місце в потоці лишається тим самим.
HTML
<div class="rot">Повернутий на 7°</div>
<div>Звичайний блок для порівняння</div>CSS
div {
width: 220px;
padding: 10px;
margin-bottom: 16px;
background: #eef6ff;
border: 1px solid #0172ad;
}
.rot {
transform: rotate(7deg);
}Простий приклад роботи властивості
Динамічний приклад застосування властивості transform
Коментарі
Коментарів ще немає — будьте першим!