-webkit-transform
Автор: Евгений Рыжков Дата публикации: 30.08.2010
Свойство -webkit-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(<угол>) — определяет поворот элемента на заданный угол относительно центра поворота, заданного свойством -webkit-transform-origin
- rotate3d(<число>, <число>, <число>, <угол>) — определяет поворот элемента на заданный угол по направлению вектора, заданного первыми тремя параметрами. Элемент поворачивается относительно точки, заданной свойством -webkit-transform-origin
- rotateX(<число>) — определяет угол поворота элемента по оси x
- rotateY(<число>) — определяет угол поворота элемента по оси y
- rotateZ(<число>) — определяет угол поворота элемента по оси z
- skew(<угол>) — определяет наклон элемента. Можно задать два числа через запятую: первый по оси x, второй по оси y. Если задано только одно значение, наклон по оси y будет равен 0
- skewX(<угол>) — определяет угол наклона элемента по оси x.
- skewY(<угол>) — определяет угол наклона элемента по оси y.
- perspective(<глубина>) — расстояние в пикселях от зрителя до плоскости z = 0.
Значение по умолчанию | none |
---|---|
Применимо | к блочным и строчным элементам |
Наследование | нет |
Поддерживается браузерами |
|
Пример
CSS
div {
width:100px;
height:50px;
-webkit-transform:rotate(45deg) skewX(15deg) scale(1.5, 3);
}
Заметки
Перечень функций, которые поддерживаются Safari 4.0.3/Mac OS X и Safari 5/Win и выше и не поддерживаются Chrome: matrix3d, perspective, rotate3d, rotateX, rotateY, rotateZ, scale3d, scaleX, scaleY, scaleZ, translate3d, translateZ.
В спецификации CSS3 есть аналогичное свойство transform.
По теме
- Вендорные префиксы. Что это?
- CSS свойство -moz-transform
- CSS свойство -o-transform
- CSS свойство -ms-transform
- CSS свойство transform-origin
- CSS свойство -o-transform-origin
- CSS свойство -moz-transform-origin
- CSS свойство -ms-transform-origin
- CSS свойство -webkit-transform-origin
- CSS свойство -webkit-transform-origin-x
- CSS свойство -webkit-transform-origin-y
- CSS свойство -webkit-transform-origin-z
- CSS свойство perspective
- CSS свойство -webkit-perspective
- CSS свойство perspective-origin
- CSS свойство -webkit-perspective-origin
- CSS свойство transform-style
- CSS свойство -webkit-transform-style
- CSS свойство backface-visibility
- CSS свойство -webkit-backface-visibility