Свойство -moz-transform / свойство -webkit-transform

Поддержка браузерами:

  • moz-transform: Firefox;
  • webkit-transform: Safari, Google Chrome.

Эти свойства задают двумерное линейное преобразование, применяемое к элементу. Исходное положение преобразования определяется свойством -moz-transform-origin.

С помощью линейных преобразований можно вращать, масштабировать, наклонять, сдвигать элементы в произвольном порядке:

moz_transform_3

Свойства -moz-transform и webkit transform предоставляют ряд функций для наиболее распространенных операций (rotate, scale, skew и translate) и функцию для определения общей трансформации (matrix).

Все эти функции могут быть использованы в любом порядке. Обратите внимание, что любая комбинация двумерных линейных преобразований может быть задана с помощью одного вызова matrix. Если нужно применить к элементу простую операцию (например, только один оборот или смещение), то стоит использовать соответствующий метод. Но если нужна сложная операция, лучше использовать метод matrix для более быстрого отображения. В Internet Explorer фильтр matrix обеспечивает аналогичный функционал.

Эти функции преобразования аналогичны преобразованиям, поддерживаемым SVG и VML.

Возможные значения:

  • matrix(a, b, c, d, transX, transY)
  • rotate(угол)
  • scale(x[, y])
  • scaleX(x)
  • scaleY(y)
  • skew(уголX[, уголY])
  • skewX(angleX)
  • skewY(angleY)
  • translate(x[, y])
  • translateX(x)
  • translateY(y)

Описание значений:

matrix(a, b, c, d, transX, transY)Firefox, Safari, Google Chrome
 
Осуществляет указанное линейное преобразование элемента. Значения transX и transY должны быть приведены в Firefox в единицах длины, а в Chrome и Safari без использования единиц длины (данные браузеры всегда рассчитывают эти значения в пикселях).
NoneFirefox, Safari, Google Chrome
 
Никакое преобразование не выполняется.
webkit transform rotate(угол)Firefox, Safari, Google Chrome
 
Вращает элемент по часовой стрелке вокруг точки начала координат на заданный угол.
scale(x[, y])Firefox, Safari, Google Chrome.
 
Растягивает/сжимает элемент по отношению к точке начала координат в соответствии со значениями х и у. Если значение у не задано, то размеры изменяются в обоих направлениях с коэффициентом х.
scaleX(x)Firefox, Safari, Google Chrome
 
Растягивает/сжимает элемент по отношению к точке начала координат на значение х.
webkit transform scaleY(y)Firefox, Safari, Google Chrome
 
Растягивает/сжимает элемент по отношению к точке начала координат на значение у.
skew(angleX[, angleY])Firefox, Safari, Google Chrome
 
Наклоняет элемент против часовой стрелки по горизонтали и по часовой стрелке по вертикали в соответствии с заданными углами. Каждый угол должен указываться в соответствии с указателем элемента (deg, grad или rad). Значение по умолчанию angleY равно нулю (без вертикального скоса).
skewX(angleX)Firefox, Safari, Google Chrome
 
Наклоняет элемент против часовой стрелки по горизонтали в соответствии с заданным углом Х.
skewY(angleY)Firefox, Safari, Google Chrome
 
Наклоняет элемент по часовой стрелке по вертикали в соответствии с углом Y.
webkit transform translate (x[, y])Firefox, Safari, Google Chrome
 
Сдвигает элемент по горизонтали и по вертикали в соответствии со значениями х и у. Значения х и y должны быть указаны в единицах длины.Значение y по умолчанию равно нулю (без вертикального смещения).
translateX(x)Firefox, Safari, Chrome
 
Сдвигает элемент по горизонтали в соответствии со значением х. Значение х должно быть указано в единицах длины.
translateY(y)Firefox, Safari, Google Chrome
 
Смещает элемент по вертикали в соответствии со значением у. Значение у должно быть указано в единицах длины.

По умолчанию: none

Функции преобразования

Matrix

matrix(a, b, c, d, transX, transY)

Выполняет для элемента указанное линейное преобразование. Каждая точка элемента представлена вектором (х, у, 1), где х и y являются координатами точки в локальной системе координат, указанной в свойстве -moz-transform-origin. Результатом метода matrix является следующая операция умножения величин:

moz_transform

Это означает, что каждая точка (х, у) переходит в точку (a * x + c * y + transX, b * x + d * y + transY).

Например:

matrix(1, 0, 0, 1, 0px, 0px) идентично преобразованию (каждая точка остается неподвижной):

(x, y) --> (1 * x + 0 * y + 0, 0 * x + 1 * y + 0) = (x, y)

matrix(2, 0, 0, 1, 0px, 0px) является горизонтальным увеличением размеров в два раза по отношению к исходным размерам:

(x, y) --> (2 * x + 0 * y + 0, 0 * x + 1 * y + 0) = (2 * x, y)

matrix(2, 0, 0, 1, 0px, 0px) является вертикальным увеличением размеров в два раза по отношению к исходным размерам:

(x, y) --> (1 * x + 0 * y + 0, 0 * x + 2 * y + 0) = (x, 2 * y)

webkit transform matrix (3, 0, 0, 3, 0px, 0px) является увеличением размеров в три раза по отношению к исходным размерам:

(x, y) --> (3 * x + 0 * y + 0, 0 * x + 3 * y + 0) = (3 * x, 3 * y)

matrix(-1, 0, 0, 1, 0px, 0px) является горизонтальным отражением по отношению к оси у:

(x, y) --> (-1 * x + 0 * y + 0, 0 * x + 1 * y + 0) = (-x, y)

matrix(1, 0, 0, -1, 0px, 0px) является вертикальным отражением по отношению к оси x:

(x, у) -> (1 * х + 0 * у + 0, 0 * х + -1 * у + 0) = (х, у)

matrix(-1, 0, 0, -1, 0px, 0px) является отражением по отношению к исходному положению:

(x, у) -> (-1 * х + 0 * у + 0, 0 * х + -1 * у + 0) = (-x, -y)

matrix(-2, 0, 0, 1, 0px, 0px) является отражением по отношению к исходному положению с горизонтальным уменьшением размеров в два раза:

(x, у) -> (-2 * х + 0 * у + 0, 0 * х + 1 * у + 0) = (-2 * х, у)

matrix(1, 0, 1, 1, 0px, 0px) является горизонтальным наклоном против часовой стрелки на 45 градусов.

(x, у) -> (1 * х + 1 * у + 0, 0 * х + 1 * у + 0) = (х + у, у)

Перемещение каждой точки элемента по горизонтали вдоль оси y.

matrix(1, 0, -1, 1, 0px, 0px) является наклоном по часовой стрелке по горизонтали на 45 градусов.

(x, у) -> (1 * х - 1 * у + 0, 0 * х + 1 * у + 0) = (х - у, у)

Перемещение каждой точки элемента по горизонтали в направлении обратном направлению оси у.

webkit transform matrix (1, 1, 0, 1, 0px, 0px) является наклоном по часовой стрелке по вертикали на 45 градусов.

(x, у) -> (1 * х + 0 * у + 0, 1 * х + 1 * у + 0) = (х, у + х)

Перемещение каждой точки элемента по вертикали вдоль оси х.

matrix(1, -1, 0, 1, 0px, 0px) является наклоном против часовой стрелки по вертикали на 45 градусов.

(x, у) -> (1 * х + 0 * у + 0, -1 * х + 1 * у + 0) = (х, у - х)

Перемещение каждой точки элемента по вертикали в направлении обратном направлению оси х.

matrix(1, 0, 0, 1, 5px, 0px) является горизонтальным смещением на 5 пикселей:

(x, у) -> (1 * х + 0 * у + 5px, 0 * х + 2 * у + 0) = (х + 5px, у)

matrix(1, 0, 0, 1, 0px, -10px) является вертикальным смещением на -10 пикселей:

(x, у) -> (1 * х + 0 * у + 5px, 0 * х + 2 * у + 0) = (х, у - 10px)

Основным преимуществом функции matrix является то, что каждое двухмерное линейное преобразование можно описать с помощью одной функции.

Преобразование основывается на умножении функций (и их умноженных свойств):

moz_transform_2

Свойство moz-transform-origin указывает исходное положение относительно элемента. А оси х и у всегда параллельны горизонтальной и вертикальной сторонам элемента, поэтому преобразования изменяют локальную систему координат. Из-за этого matrix преобразования необходимо умножать справа налево, а не слева направо.

Это значит, что:

matrix(a1, b1, c1, d1, transX1, transY1) matrix(a2, b2, c2, d2, transX2, transY2) =
matrix(a2*a1 + b2*c1, a2*b1 + b2*d1, c2*a1 + d2*c1, c2*b1 + d2*d1, transX2*a1 + transY2*c1 + transX1, transX2*b1 + transY2*d1 + transY1)

Например, если нужно выполнить горизонтальное отражение по оси y с последующим горизонтальным смещением на 5 пикселей:

  • matrix(-1, 0, 0, 1, 0px, 0px) matrix(1, 0, 0, 1, 5px, 0px);
  • webkit transform matrix(-1, 0, 0, 1, -5px, 0px).

Если нужно выполнить эти операции в обратном порядке. Например, горизонтальное смещение на 5 пикселей с последующим горизонтальным отражением по оси у:

  • matrix(1, 0, 0, 1, 5px, 0px) matrix(-1, 0, 0, 1, 0px, 0px);
  • matrix(-1, 0, 0, 1, 5px, 0px).

Если нужно выполнить более двух преобразований, умножьте первые две функции справа налево и замените их полученным в результате умножения значением. На этом шаге вы сократили количество преобразований на одно. Выполните те же действия, пока не останется только одна matrix, это и будет окончательная функция.

Rotate

webkit transform rotate (angle)

Поворачивает элемент по часовой стрелке вокруг точки отсчета координат на заданный угол. Эквивалентно преобразованию matrix(cos(angle), sin(angle), -sin(angle), cos(angle), 0, 0).

Чтобы получить дополнительную информацию, посмотрите пример 2.

Scale

Поддерживаются три функции масштабирования:

  1. scale(x[, y])

Изменяет размеры элемента по отношению к исходным в соответствии со значениями х и у. Если у не задано, то по горизонтали и вертикали размеры изменяются на коэффициент х.

Эквивалентно преобразованию matrix(x, 0, 0, y, 0, 0).

  1. scaleX(x)

Изменяет размеры элемента по отношению к исходным вдоль горизонтальной оси в соответствии со значением х.

Эквивалентно преобразованию matrix(х, 0, 0, 1, 0, 0).

  1. scaleY(у)

Изменяет размеры элемента по отношению к исходным вдоль вертикальной оси в соответствии со значением у.

Эквивалентно преобразованию matrix(1, 0, 0, у, 0, 0).

Чтобы получить дополнительную информацию о webkit transform scale, посмотрите пример 3.

Skew

Поддерживаются три функции скоса:

  1. skew(angleX[, angleY])

Наклоняет элемент против часовой стрелки по горизонтали и по часовой стрелке по вертикали в соответствии с заданными углами.
Эквивалентно преобразованию matrix(1, tan(угол Y), tan(угол X), 1, 0, 0).

  1. skewX(угол X)

Наклоняет элемент против часовой стрелки по горизонтали на угол X. Эквивалентно преобразованию matrix(1, 0, tan(угол X), 1, 0, 0).

  1. skewY(уголY)

Наклоняет элемент по часовой стрелке по вертикали на угол Y. Эквивалентно преобразованию matrix(1, tan(уголY), 0, 1, 0, 0).

Чтобы получить дополнительную информацию о webkit transform, посмотрите пример 4.

Translate

Поддерживаются три функции смещения:

  1. translate(x[, y])

Смещает элемент по горизонтали и по вертикали в соответствии со значениями х и у. Значения х и y должны быть указаны в единицах длины. Значение y по умолчанию равно нулю (без вертикального смещения).

Эквивалентно преобразованию matrix(1, 0, 0, 1, х, у).

  1. translateX(х)

Смещает элемент по горизонтали в соответствии со значением х. Значение х должно быть указано в единицах длины.

Эквивалентно преобразованию matrix(1, 0, 0, 1, х, 0).

  1. translateY(у)

Смещает элемент по вертикали в соответствии со значением y. Значение y должно быть указано в единицах длины.

Эквивалентно преобразованию matrix (1, 0, 0, 1, 0, у).

Чтобы получить дополнительную информацию по webkit transform translate, посмотрите пример 1.

Пример HTML-кода 1:

Этот пример иллюстрирует использование свойств -moz-transform, -webkit-transform и метода translate:

<head>
    <style>
        .notrans {
             width: 300px;
             border:4px solid #ff0000;
        }

        .trans {
             width: 300px;
             border:4px solid #ff0000;

            -moz-transform: translate(100px, 0px);
            -webkit-transform: translate(100px, 0px);
        }
    </style>
</head>
<body>
    <div class="notrans">An element without translation</div>
    <br /><br />
    <div class="trans">An element translated horizontally by 100px</div>
</body>
Пример HTML-кода 1

Пример HTML-кода 2:

Этот пример иллюстрирует использование свойств -moz-transform, webkit transform и метода rotate:

<head>
    <style>
        .rotated {
             width: 300px;
             border:4px solid #ff0000;

            -moz-transform-origin: 0px 0px;     /* move the origin to top-left */
            -webkit-transform-origin: 0px 0px;  /* move the origin to top-left */

            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="rotated">An element rotated by 45 degrees</div>
</body>
Пример HTML-кода 2

Пример HTML-кода 3:

Этот пример иллюстрирует использование свойств -moz-transform, webkit transform scale:

<head>
    <style>
        .noscaled {
             width: 300px;
             height: 30px;
             border:4px solid #ff0000;
        }

        .scaled {
             width: 300px;
             height: 30px;
             border:4px solid #ff0000;

            -moz-transform-origin: 0px 0px;     
            -webkit-transform-origin: 0px 0px;

            -moz-transform: scale(2, 3);
            -webkit-transform: scale(2, 3);
        }
    </style>
</head>
<body>
    <div class="noscaled">A 300x30 element without scaling</div>
    <br /><br />
    <div class="scaled">A 300*30 scaled element</div>
</body>
Пример HTML-кода 3

Пример HTML-кода 4:

Этот пример иллюстрирует использование свойств -moz-transform, webkit transform и метода skew:

<head>
    <style>
        .base {
             width: 300px;
             height: 80px;
             border:4px solid #ff0000;

            -moz-transform-origin: 0px 0px;     /* move the origin to top-left */
            -webkit-transform-origin: 0px 0px;  /* move the origin to top-left */
        }

        .skewH {
            -moz-transform: skewX(20deg);
            -webkit-transform: skewX(20deg);
        }
        .skewV {
            -moz-transform: skewY(20deg);
            -webkit-transform: skewY(20deg);
        }
        .skewHV {
            -moz-transform: skew(20deg, 20deg);
            -webkit-transform: skew(20deg, 20deg);
        }
    </style>
</head>
<body>
    <div class="base skewH">Horizontal skew</div>
    <br /><br />
    <div class="base skewHV">Horizontal and vertical skew</div>
    <br /><br />
    <div class="base skewV">Vertical skew</div>
</body>
Пример HTML-кода 4

Пример HTML-кода 5:

Этот пример иллюстрирует использование свойств -moz-transform, webkit transform matrix:

<head>
    <style>
        .base {
             width: 300px;
             height: 80px;
             border:4px solid #ff0000;

            -moz-transform-origin: 0px 0px;     /* move the origin to top-left */
            -webkit-transform-origin: 0px 0px;  /* move the origin to top-left */
        }

        .rotate_translate {
            -moz-transform: rotate(30deg) translateX(200px);
            -webkit-transform: rotate(30deg) translateX(200px);
        }
        .rotateMatrix_translateMatrix {
            -moz-transform: matrix(0.866, 0.5, -0.5, 0.866, 0px, 0px) matrix(1, 0, 0, 1, 200px, 0px);
            -webkit-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0) matrix(1, 0, 0, 1, 200, 0);
        }
        .rotate_translateMatrix {
            -moz-transform: matrix(0.866, 0.5, -0.5, 0.866, 160px, 100px);
            -webkit-transform: matrix(0.866, 0.5, -0.5, 0.866, 160, 100);
        }
    </style>
</head>
<body>
    <div class="base rotate_translate">Skew and rotate</div>
    <br /><br />
    <div class="base rotateMatrix_translateMatrix">Skew matrix and rotation matrix</div>
    <br /><br />
    <div class="base rotate_translateMatrix">Skew and rotation matrix</div>
</body>
Пример HTML-кода 5

Пример HTML-кода 6:

Этот пример иллюстрирует использование свойств -moz-transform, webkit transform и свойств filter:

<head>
    <style>
        .rotate_scale {
             width: 300px;
             height: 300px;
             background-color:red;

             filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.433, M12=-0.25, M21=0.25, M22=0.433, Dx=100, Dy=50);
            -moz-transform: matrix(0.433, 0.25, -0.25, 0.433, 0px, 0px);
            -webkit-transform: matrix(0.433, 0.25, -0.25, 0.433, 0, 0);
        }
    </style>
</head>
<body>
    <div class="rotate_scale"></div>
</body>
использование свойств -moz-transform

Перевод статьи «-moz-transform property -webkit-transform property» был подготовлен дружной командой проекта Сайтостроение от А до Я.

19 декабря 2016 в 10:33
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок