Китегории

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
transform: <функция> [<функция>]* | none
 
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>
<!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>
 
<!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.