| 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)
Пример
HTML5CSS3IECrOpSaFx
<!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-transform.