Справочник по 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.

Смотрите также

-moz-transform-origin

Ссылки на источники

https://developer.mozilla.org/en/CSS/-moz-transform

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="https://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
смотрим также
    Rambler\'s Top100 Индекс цитирования
    смотрим также