Масштабує елемент у двовимірному просторі по горизонталі та вертикалі або одночасно у двох напрямках. Зміна масштабу може відбуватися як у більшу, так і меншу сторону.
Масштабування за допомогою scale(sx, xy) продемонстровано в табл. 1.
 | transform: scale(1) | Початкове зображення. |
| transform: scale(1.2) | Збільшення масштабу в 1,2 рази . |
| transform: scale(1.2, 1) | Збільшення масштабу лише по горизонталі в 1,2 рази. |
| transform: scale(0.5) | Зменшення масштабу в два рази. |
| | transform: scale(-1, 1) | Дзеркальне відображення по горизонталі. |
| transform: scale(1,-1) | Дзеркальне відображення по вертикалі. |
| transform: scale(-1) | Дзеркальне відображення по горизонталі та вертикалі. |
Синтаксис
<code>transform: scale(sx); transform: scale(sx, xy);
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися у вказаному порядку. | <размер> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
- sx
- Масштаб елемента по горизонталі.
- значення більше 1 (наприклад: 1.5) призводить до збільшення масштабу;
- значення менше 1 (наприклад: 0.8) призводить до зменшення масштабу;
- негативне значення (наприклад :-1) дзеркально відображає елемент по горизонталі;
- значення 1 залишає розмір елемента вихідним і не дає видимого ефекту. dd>Масштаб елемента по вертикалі. Якщо значення не вказано, то за замовчуванням приймається рівним sx.
Одне значення визначає масштабування елемента одночасно по горизонталі та вертикалі, із збереженням пропорцій сторін елемента. Два значення задають масштаб елемента по горизонталі та вертикалі незалежно, що може призвести до спотворення пропорцій сторін.
Пісочниця
img { transform: scale(<span class="playground-active">{{ playgroundValue }}</span>); }Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>scale()</title> <style> div { display: inline-block; /* Вибудовуємо по горизонталі */
overflow: hidden; /* Обрізаємо */
}
div img { display: block; /* Забираємо відступ знизу */
transition: 1s; /* Час переходу */
}
div img:hover { transform: scale(1.4); /* Масштабуємо */
}
</style>
</head>
<body> <div><img src="image/meduza1.jpg" alt=""></div> <div><img src="image/meduza2.jpg" alt=""></div> <div><img src="image/meduza3.jpg" alt=""></div>
</body>
</html>У цьому прикладі при наведенні покажчика на картинку вона плавно збільшує свій масштаб. Щоб розміри блоку залишалися вихідними, використовується властивість overflow зі значенням hidden.
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Transforms Module Level 1 | Робочий проект |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C та рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| 9 | 12 | 4 | 11.5 | 3.1 | 3.5 |
| 2.1 | 3.5 | 12 | 3.2 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
- — властивість браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації.="views-similar-recipe" class="block">
Рецепти