CSS свойство transform

Свойство transform указывает двумерную или трехмерную трансформацию элемента.

Свойство позволяет вращать, масштабировать, сдвигать, наклонять элемент.

Свойство transform имеет значение none или значение из списка функций transform.

Только позиционированные элементы блочной модели могут быть трансформированы.
Значение по умолчанию none
Применяется К трансформируемым элементам.
Наследуется Нет
Анимируемое Да. Градус анимируем.
Версия CSS3
DOM синтаксис Object.style.transform = "rotate(10deg)";

Синтаксис

transform: none | transform-functions | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      border: 2px dashed #666;
      background-color: #8ebf42;
      transform: translate(10px, 40px) rotate(50deg);
      width: 130px;
      height: 80px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства transform</h2>
    <div>Элемент</div>
  </body>
</html>

Пример со значениями "rotate", "skewY", "scaleY", "translateX", "skew":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div.box1 {
      width: 130px;
      height: 80px;
      border: 1px solid #000;
      background-color: #1c87c9;
      -ms-transform: rotate(30deg); 
      -webkit-transform: rotate(30deg); 
      transform: rotate(30deg);
      }
      div.box2 {
      width: 120px;
      height: 80px;
      border: 1px solid #000;
      background-color: #8ebf42;
      -ms-transform: skewY(30deg); 
      -webkit-transform: skewY(30deg); 
      transform: skewY(30deg);
      }
      div.box3 {
      width: 160px;
      height: 80px;
      border: 1px solid #000;
      background-color: #FFFF00;
      -ms-transform: scaleY(1); 
      -webkit-transform: scaleY(1); 
      transform: scaleY(1);
      }
      div.box4 {
      width: 160px;
      height: 80px;
      border: 1px solid #000;
      background-color: #ccc;
      -ms-transform: rotate(160deg); 
      -webkit-transform: rotate(160deg); 
      transform: rotate(160deg);
      }
      div.box5 {
      width: 160px;
      height: 80px;
      border: 1px solid #000;
      background-color: #990099;
      -ms-transform: translateX(50px); 
      -webkit-transform: translate(50px); 
      transform: translateX(50px);
      }
      div.box6 {
      width: 160px;
      height: 80px;
      border: 1px solid #000;
      background-color: #FF0000;
      -ms-transform: skew(170deg,170deg);
      -webkit-transform: skew(170deg,170deg); 
      transform: skew(170deg,170deg);
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства transform</h2>
    <h3>transform: rotate(30deg):</h3>
    <div class="box1"></div>
    <br>
    <h3>transform: skewY(30deg):</h3>
    <div class="box2"></div>
    <br>
    <h3>transform: scaleY(1):</h3>
    <div class="box3"></div>
    <br>
    <h3>transform: transform:rotate(160deg):</h3>
    <div class="box4"></div>
    <br>
    <h3>transform: translateX(50px):</h3>
    <div class="box5"></div>
    <br>
    <h3>transform: skew(170deg,170deg):</h3>
    <div class="box6"></div>
  </body>
</html>
В данном примере для максимальной совместимости браузера использованы такие расширения, как -webkit- для Safari, Google Chrome и Opera.

Значения

Значение Описание
none Трансформация не применяется.
translate() Сдвигает элемент вектором [tx, ty]. Tx сдвигает элемент по оси x, а ty сдвигает по оси y..
translateX() Сдвигает элемент по горизонтали
translateY() Сдвигает элемент по вертикали..
scale() Масштабирует элемент.
scaleX() Масштабирует элемент по горизонтали.
scaleY() Масштабирует элемент по вертикали.
rotate(number) Поворачивает элемент в двумерном пространстве. Угол указывается в параметрах.
skew() Указывает двумерный наклон трансформации по вертикали и по горизонтали.
skewX Указывает двумерный наклон трансформации по горизонтали.
skewY Указывает двумерный наклон трансформации по вертикали.
matrix() Указывает двумерную трансформацию, используя матрицу из шести значений.
translateZ Сдвигает элемент по оси z на указанное значение.
translate3d() Сдвигает элемент в трехмерном пространстве.
scaleZ() Масштабирует элемент в трехмерном пространстве относительно оси z.
scale3d() Масштабирует элемент в трехмерном пространстве относительно оси z.
rotateX() Поворачивает элемент по оси x в трехмерном пространстве.
rotateY() Поворачивает элемент по оси y в трехмерном пространстве.
rotateZ() Поворачивает элемент по оси z в трехмерном пространстве.
rotate3d() Поворачивает элемент в трехмерном пространстве.
matrix3d() Указывает трехмерную трансформацию, используя матрицу 4x4 из 16 значений.
perspective() Указывает вид в перспективе для трехмерного элемента.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome firefox safari opera
36.0+
12.0-35.0 -webkit-
16.0+
10.0-15.0 -moz-
4.0+
-webkit-
23.0+
15.0-22.0 -webkit-

Практикуйте свои знания

Какие трансформации можно использовать с CSS свойством 'transform'?
Считаете ли это полезным?