Свойство transform

Последнее обновление: 04.05.2011

Свойство 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);
}
Твой код:
Результат:
большой полигон

Заметки

Safari 5.0 и выше поддерживают аналогичное свойство -webkit-transform.

Safari 3.1 и выше Chrome 1 и выше поддерживают похожее свойство -webkit-transform, Opera 10.5 и выше поддерживает похожее свойство -o-transform, Firefox 3.5 и выше -moz-transform, а IE9 и выше -ms-transform, но все они поддерживают только функции 2d трансформации.

По теме

Теги: , , ,
Показать комментарии

CSS по стандартам

CSS расширения

twitter RSS e-mail