transform

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)

Пример

<!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.

Категория: Анимация