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 {
    transform: rotate(15deg);
   }
  </style>
 </head>
 <body>
  <p><img src="image/igels.png" alt="Ёжик" class="turn">
     <img src="image/igels.png" alt="Ёжик" class="turn"></p>
 </body>
</html>

В данном примере при наведении курсора на изображение оно поворачивается на 15 градусов по часовой стрелке.

Объектная модель

Объект.style.transform

Примечание

Internet Explorer 9 поддерживает свойство -ms-transform.

Chrome до версии 36 и Android до версии 4 поддерживают свойство -webkit-transform.

Safari поддерживает свойство -webkit-transform.

Opera до версии 12.10 и с версии 15 до 23 поддерживает свойство -o-transform.

Firefox до версии 16 поддерживает свойство -moz-transform.

Спецификация

СпецификацияСтатус
CSS Transforms Level 1Рабочий проект

Браузеры

Internet ExplorerChromeOperaSafariFirefox
91053610.512.10152343.516
AndroidFirefox MobileOpera MobileSafari Mobile
2.143.51611.54




Рекомендую хостинг: beget.ru

Сервер падал:50 дн. 10:24 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru