Свойство 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 3.1 и выше Chrome 1 и выше поддерживают аналогичное свойство -webkit-transform.
Opera 10.5 и выше поддерживает похожее свойство -o-transform, а Firefox 3.5 и выше -moz-transform, но они поддерживают только функции 2d трансформации.