Главная/ CSS справочник/ Properties/ CSS свойство transform | назначение, допустимые значения, примеры

Свойство transform

Свойство transform — применяет трансформацию к элементу (можно применить несколько трансформаций, задавая значения через пробел).

Элемент можно передвигать, масштабировать, поворачивать и наклонять.

Допустимые значения

  • none — элемент не трансформируется
  • — элемент трансформируется согласно одной из следующих функций:
    • matrix(, , , , , ) — определяет матрицу, на которую будет умножена матрица, составленная из исходных координат элемента для получения новых координат
    • matrix3d(, , , , , , , , , , , , , , , ) — определяет 3d матрицу, на которую будет умножена матрица, составленная из исходных координат элемента для получения новых координат
    • translate() — определяет сдвиг элемента. Можно задать два сдвига, через запятую: первый по оси x, второй по оси y. Если задано только одно значение, сдвиг по оси y будет равен 0
    • translate3d(, , ) — определяет сдвиг элемента по оси x, по оси y и по оси z
    • translateX() — определяет сдвиг элемента по оси x
    • translateY() — определяет сдвиг элемента по оси y
    • translateZ() — определяет сдвиг элемента по оси z
    • scale() — определяет масштабирование элемента. Можно задать два числа через запятую: первый по оси x, второй по оси y. Если задано только одно значение, масштаб по оси y будет равен масштабу по оси x
    • scale3d(, , ) — определяет масштаб элемента по оси x, по оси y и по оси z
    • scaleX() — определяет масштаб элемента по оси x
    • scaleY() — определяет масштаб элемента по оси y
    • scaleZ() — определяет масштаб элемента по оси z
    • rotate() — определяет поворот элемента на заданный угол относительно центра поворота, заданного свойством transform-origin
    • rotate3d(, , , ) — определяет поворот элемента на заданный угол по направлению вектора, заданного первыми тремя параметрами. Элемент поворачивается относительно точки, заданной свойством transform-origin
    • rotateX() — определяет угол поворота элемента по оси x
    • rotateY() — определяет угол поворота элемента по оси y
    • rotateZ() — определяет угол поворота элемента по оси z
    • skew() — определяет наклон элемента. Можно задать два числа через запятую: первый по оси x, второй по оси y. Если задано только одно значение, наклон по оси y будет равен 0
    • skewX() — определяет угол наклона элемента по оси x.
    • skewY() — определяет угол наклона элемента по оси y.
    • perspective() — расстояние в пикселях от зрителя до плоскости z = 0.
Значение по умолчанию none
Применимо к блочным и строчным элементам
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами

    Пример


    div {
    width:100px;
    height:50px;
    transform:rotate(45deg) skewX(15deg) scale(1.5, 3);
    }


    Твой код:

    Результат: