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	Значение элемента наследуется от родительского элемента.