| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |||
| 9.0 + | 10.0 + | 5.0 + | 10.5 + | 12.10 + | 3.1 + | 3.5 + | 16.0 + | 2.1 + | 2.0 + |
Коротка інформація
| Значення за умовчанням | none |
|---|---|
| Успадковується | Ні |
| Застосовується | До блоковим і рядковим елементів |
| Відсотковий запис | незастосовні |
| посилання на специфікацію | http://www.w3.org/TR/css3-2d-transforms/#transform-property |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Трансформує елемент, зокрема, дозволяє його масштабувати, обертати, зрушувати, нахиляти, а також комбіновані ь види трансформацій.
Синтаксис
transform: <функція> [<функція> ] * | none
Значення
- функція
- Функція трансформації.
- none
- скасовує дію трансформації.
Функції трансформації
matrix
Задає матрицю перетворень.
rotate
Поворот елемента на заданий кут відносно точки трансформації, що задається властивістю transform-origin .
transform: rotate (< кут > )
scale
Масштаб елемента по горизонталі і вертикалі.
transform: scale (sx [, sy]);
значення більше 1 збільшує масштаб елемента, менше 1 - зменшує масштаб.
scaleX
Масштабує елемент по горизонталі.
transform: scaleX (sx);
scaleY
Масштабує елемент по вертикалі.
transform: scaleY (sy);
skewX
Нахиляє елемент на заданий кут по вертикалі.
transform: skewX (< угол > )
skewY
Нахиляє елемент на заданий кут по горизонталі.
transform: skewY (< кут > )
translate
Зрушує елемент на задане значення по горизонталі і вертикалі.
transform: translate (tx [, ty])
translateX
Зрушує елемент по горизонталі на вказане значення. Позитивне значення зрушує вправо, негативне вліво.
transform: translateX (tx)
translateY
Зрушує елемент по вертикалі на вказане значення. Позитивне значення зрушує вниз, негативне вгору.
transform: translateY (ty)
Приклад
HTML5 CSS3 IE Cr Op Sa Fx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
transform </title>
<style>
.turn: hover {-moz-transform: rotate (15deg); /* Для Firefox */ -ms-transform: rotate (15deg); /* Для IE */ -webkit-transform: rotate (15deg); /* Для Safari, Chrome, iOS */ -o-transform: rotate (15deg); /* Для Opera */ transform: rotate (15deg); } </style>
</head>
<body>
<p>
<img src="images/igels.png" alt="Їжачок" class="turn">
<img src="images/igels.png" alt="Їжачок" class="turn">
</p>
</body>
</html>
В даному прикладі при наведенні курсору на зображення воно повертається на 15 градусів за годинниковою стрілкою.
Об'єктна модель
[window.] document.getElementById (" elementID "). style.transform
Браузери
Internet Explorer 9 підтримує нестандартне властивість - ms-transform .
Chrome, Safari, Android і iOS підтримують нестандартне властивість - webkit- transform .
Opera до версії 12.10 підтримує нестандартне властивість -o-transform .
Firefox до версії 16.0 підтримує нестандартне властивість - moz-t ransform .