Справочник по CSS : Тематический указатель : Расширения CSS для Firefox (Gecko) : Свойства : -moz-transform
Материал из Справочник Web-языков
Содержание |
Свойство -moz-transform
Используется для поворота, наклона или масштабирования элементов.
Синтаксис
-moz-transform: <transform-function> [<transform-function>]* | none
Используемые значения
- transform-function
- Один из методов трансформации, применяемый в CSS (описаны в разделе Замечания)
- none
- Трансформация к элементу не применяется.
Значением по умолчанию является none. Атрибут Каскадных таблиц стилей (CSS) не наследуется.
Замечания
Свойство -moz-transform применяется ко всем блочным и встроенным элементам.
Для задания значений свойству -moz-transform используются следующие виды трансформации:
- matrix - задает 2D матрицу трансформации.
- -moz-transform: matrix(a, c, b, d, tx, ty). a, c, b, d - это коэффициенты для построения матрицы вида
┌ ┐ │ a b │ │ c d │ └ ┘
- tx, ty - коэффициенты преобразования.
- rotate - поворачивает элемент по часовой стрелке на заданный угол поворота.
- -moz-transform: rotate(angle); /* <angle> - это значение угла, например, rotate(30deg) */
- Значение rotate - это тоже самое, что матрица [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]
- scale - 2D операция масштабирования.
- -moz-transform: scale(sx[, sy]); /* одно или два значения <number>, например, scale(2.1,4) */
- Если sy специально не задано, то по умолчанию оно будет равно sx
- scaleX - операция масштабирования по вектору [sx, 1].
- -moz-transform: scaleX(sx); /* значение <number>, например, может быть равно scaleX(2.7) */
- scaleY - операция масштабирования по вектору [1, sy].
- -moz-transform: scaleY(sy); /* значение <number>, например, может быть равно scaleY(0.3) */
- skew - осуществляется наклон элемента по осям X и Y на заданные углы.
- -moz-transform: skew(ax[, ay]); /* одно или два значения <angle>, например skew(30deg,-10deg) */
- Если ay специально не задано, то наклон по оси Y происходить не будет.
- skewX- осуществляется наклон элемента по оси X на заданный угол.
- -moz-transform: skewX(angle); /* значение <angle>, например, может быть skewX(-30deg) */
- skewY- осуществляется наклон элемента по оси Y на заданный угол.
- -moz-transform: skewY(angle); /* значение <angle>, например, может быть skewY(60deg) */
- translate - осуществляется 2D преобразование (перемещение) элемента по вектору [tx, ty].
- -moz-transform: translate(tx[, ty]) /* одно или два значения для длины <length>*/
- Если ty специально не задано, то по умолчанию оно будет равно 0.
- translateX - осуществляется преобразование (перемещение) элемента по оси X.
- -moz-transform: translateX(tx) /* одно значение для длины <length>*/
- translateY - осуществляется преобразование (перемещение) элемента по оси Y.
- -moz-transform: translateY(ty) /* одно значение для длины <length>*/
Примеры
В примере показано как описать свойство -moz-transform для разных браузеров.
pre { width: 33em; border: solid red; /*Для Firefox*/ -moz-transform: translate(100px) rotate(40deg); -moz-transform-origin: 60% 100%; /*Для Safari*/ -webkit-transform: translate(100px) rotate(40deg); -webkit-transform-origin: 60% 100%; /*Для Opera*/ -o-transform:translate(100px) rotate(40deg); -o-transform-origin:60% 100%; }
Поддерживаемые браузеры
Firefox (Gecko) начиная с версии 3.5 (1.9.1) - для свойства -moz-transform.
Opera начиная с версии 10.5 - для свойства -o-transform.
Safari (WebKit) начиная с версии 3.1 (525) - для свойства -webkit-transform.