Трансформує елемент, зокрема, дозволяє його масштабувати, обертати, зрушувати, нахиляти, а також комбінувати види трансформацій, перераховуючи функції трансформації через пробіл.
| Значення за замовчуванням | none |
|---|---|
| Успадковується | Ні |
| Застосовується | До трансформованих елементів |
| Анімується | Так |
Синтаксис
<code> transform: <функція> [<функція>]* | none
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися в зазначеному порядку. | <розмір> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
- <функція>
- Функція трансформації.
- none
- Скасує дію трансформації.
Функції трансформації
matrix
Задає двовимірну матрицю переобра вань.
matrix3d
Задає тривимірну матрицю перетворень.
rotate()
Повертає елемент у двовимірному просторі на заданий кут щодо точки трансформації, що задається властивістю transform-origin.
rotateX()
Повертає елемент на заданий кут щодо осі X.
rotateY()
Повертає елемент на заданий кут щодо осі Y.
rotateZ()
Повертає елемент на заданий кут щодо осі Z.
rotate3d
Повертає елемент у тривимірному просторі.
scale()
Масштабує елемент по горизонталі та вертикалі.
scaleX()
Масштабує елемент по горизонталі.
scaleY()
Масштабує елемент по вертикалі.
scaleZ()
Масштабує елемент по осі Z.
scale3d
Масштабує елемент у тривимірному просторі.
skew()
Нахиляє елемент на заданий кут по горизонталі та вертикалі.
skewX()
Нахиляє елемент на заданий кут по горизонталі.
skewY()
Нахиляє елемент на заданий кут по вертикалі.
translate()
Зрушує елемент на задане значення по горизонталі та вертикалі.
translateX()
Зсув елемента по горизонталі на вказане значення. Позитивне значення зсуває праворуч, негативне вліво.
translateY()
Зсуває елемент по вертикалі на вказане значення. Позитивне значення зсуває вниз, негативне вгору.
translateZ()
Зсув елемент по осі Z на вказане значення . Позитивне значення зсуває вперед, негативне назад.
translate3d
Зрушує елемент на задане значення у тривимірному просторі.
perspective()
Задає перспективу.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transform</title> <style> .turn:hover { transform: rotate(15deg); }
</style>
</head>
<body> <p><img src="image/igels.png" alt="Їжачок" class="turn"> <img src="image/igels.png" alt="Їжачок" class="turn"></p>
</body>
</html>У цьому прикладі при наведенні курсору на зображення воно повертається на 15 градусів за годинниковою стрілкою.
Об'єктна модель
Об'єкт.style.transform
Примітка
Internet Explorer 9 підтримує властивість -ms-transform.
Chrome до версії 36, Safari до версії 9, Opera до версії 23 та Android підтримують властивість -webkit-transform.
Opera до версії 12.1 та з версії 15 до 23 підтримує властивість -o-transform.
Firefox до версії 16 підтримує властивість -moz-transform.
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Transforms Module Level 1 | Робочий проект |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| 9 | 10 | 12 | 5 | 36 | 11.5 | 12.1 | 15 | 23 | 4 | 9 | 3.5 | 16 |
| 2.1 | 3.5 | 16 | 12 | 4 | 9.2 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю п відтримується браузером з усіма допустимими значеннями;
- — властивість браузером не сприймається та ігнорується;
- ;— при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, зазначених у специфікації.
Число вказує версію браузера , з якої властивість підтримується.