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 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.
transform: <функция> [<функция>]* | none
Задаёт матрицу преобразований.
Поворот элемента на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.
transform: rotate(<
угол
>)
Масштаб элемента по горизонтали и вертикали.
transform: scale(sx[, sy]);
Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб.
Масштабирует элемент по горизонтали.
transform: scaleX(sx);
Масштабирует элемент по вертикали.
transform: scaleY(sy);
Наклоняет элемент на заданный угол по вертикали.
transform: skewX(<
угол
>)
Наклоняет элемент на заданный угол по горизонтали.
transform: skewY(<
угол
>)
Сдвигает элемент на заданное значение по горизонтали и вертикали.
transform: translate(tx[, ty])
Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.
transform: translateX(tx)
Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.
transform: translateY(ty)
Пример
<!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.
Сайт