Управляет размером, формой и положением поля и его содержимого посредством поворота, перекоса, масштабирования и перевода.
Четыре основные функции 2D-преобразования — поворот, перекос, масштабирование и перевод.
Спецификации для преобразований в настоящее время классифицируются как рабочий проект, и поэтому их следует использовать с осторожностью, поскольку тонкости того, как они работают, не доработаны.
Широко поддерживаются 2D-преобразования. Для Safari (настольных и мобильных) версий 8.x и ниже и браузера Android 4.x и ниже требуется -webkit- префикс (то есть -webkit-transform). Для Internet Explorer 9 требуется -ms- префикс (-ms-transform). 2D-преобразования не поддерживаются Opera Mini или IE8 и ниже.
3D-преобразования соответствуют тем же требованиям к префиксу, за исключением IE9, который не поддерживает 3D-преобразования.
Возможные значения
Функции 2D-преобразования
rotate([угол])
Значение: rotate([угол]).
Описание: поворачивает прямоугольник вокруг точки, указанной с помощью transform-origin, на заданный угол.
Пример: rotate(-45deg).
skewX([угол])
Значение: skewX([угол]).
Описание: наклоняет (горизонтальную) ось x на заданный угол.
Пример: skewX(20deg).
skewY([угол])
Значение: skewY([угол]).
Описание: наклоняет (вертикальную) ось y на заданный угол.
Пример: skewY(40deg).
skew([угол])
Значение: skew([угол]).
Описание: наклоняет (горизонтальную) ось x на заданный угол. Эквивалентно skewX([angle]).
Пример: skew(20deg).
skew([угол], [angle])
Значение: skew([угол], [angle]).
Описание: наклоняет (горизонтальную) ось x на первый угол и (вертикальную) ось y на второй угол.
Пример: skew(20deg, 40deg)
scaleX([число])
Значение: scaleX([число]).
Описание: растягивает или сжимает горизонтальные размеры, умножая их на указанное число.
Пример: scaleX(2)
scaleY([число])
Значение: scaleY([число]) .
Описание: растягивает или сжимает вертикальные размеры, умножая их на указанное число.
Пример: scaleY(0.5).
scale([число])
Значение: scale([число]).
Описание: растягивает или сжимает горизонтальные и вертикальные размеры, умножая их на указанное число.
Пример: scale(2).
scale([число], [number])
Значение: scale([число], [number]).
Описание: растягивает или сжимает горизонтальные размеры, умножая их на первое число, и вертикальные размеры, умножая их на второе число.
Пример: scale(2, 0.5).
translateX([длина])
Значение: translateX([длина]).
Описание: сдвигает прямоугольник по горизонтали на заданную длину.
Пример: translateX(100px).
translateY([длина])
Значение: translateY([длина]).
Описание: сдвигает прямоугольник по вертикали на заданную длину.
Пример: translateY(-2em).
translate([длина])
Значение: translate([длина]).
Описание: сдвигает прямоугольник по горизонтали на заданную длину. Эквивалентно translateX([angle]).
Пример: translateX(100px).
translate([длина], [length])
Значение: translate([длина], [length]).
Описание: сдвигает прямоугольник по горизонтали на первую длину и по вертикали на вторую длину.
Пример: translate(100px, -2em).
matrix([значения])
Значение: matrix([значения]).
Описание: матрица преобразования с шестью значениями. Каждое числовое значение относится к scale (1-е и 4-е), skew (2-е и 3-е) и translate (5-е и 6-е), в то время как rotate является неявным и определяется из других значений. Значения могут быть определены с помощью инструментов преобразования матрицы.
Пример: matrix(2.6, -0.2, 1.9, 0.9, 205, -48.7)
Функции 3D-преобразования
rotate3d([число], [number], [число], [угол])
Значение: rotate3d([число], [number], [число], [угол]).
Описание: поворачивает 3D-прямоугольник на заданный угол вокруг вектора направления, заданного числовыми значениями 1-го (ось x), 2-го (ось y) и 3-го (ось z).
Пример: rotate3d(1, -1, 1, 45deg).
rotateX([угол])
Значение: rotateX([угол]).
Описание: эквивалентно rotate3d(1,0,0,[angle]).
Пример: rotateX(45deg).
rotateY([угол])
Значение: rotateY([угол]).
Описание: эквивалентно rotate3d(0,1,0,[angle]).
Пример: rotateY(50grad).
rotateZ([угол])
Значение: rotateZ([угол]).
Описание: эквивалентно rotate3d(0,0,1,[angle]) и rotate([angle]).
Пример: rotateZ(1rad)
scale3d([число], [number], [число])
Значение: scale3d([число], [number], [число]).
Описание: растягивает или сжимает размеры, умножая ось x на первое число, ось y на второе и ось z на третье число.
Пример: scale3d(1, 2, 3).
scaleZ([число])
Значение: scaleZ([число]).
Описание: растягивает или сжимает размеры по оси z, умножая их на указанное число. Эквивалентно scale3d(1, 1, [число]).
Пример: scaleZ(3).
translate3d([длина], [длина], [длина])
Значение: translate3d([длина], [длина], [длина]).
Описание: сдвигает трёхмерный прямоугольник по оси x на первую длину, по оси y — на вторую и по оси z — на третью длину.
Пример: translate3d(10px, 20px, 30px).
translateZ([длина])
Значение: translateZ([длина]).
Описание: сдвигает трёхмерный прямоугольник по оси z на заданную длину. Эквивалентно translate3d(0, 0, [длина]).
Пример: translateZ(30px).
matrix3d([значения])
Значение: matrix3d([значения]).
Описание: матрица преобразования с шестнадцатью значениями, объединяющая все значения 3D-преобразования. Значения могут быть определены с помощью инструментов преобразования матрицы.
Пример: matrix3d(0.8, 0.3, 0.5, 0, -1, 1.6, 0.6, 0, -0.9, -1.5, 2.4, 0, -40.1, -10.2, 89.9, 1)
perspective([длина])
Значение: perspective([длина]).
Описание: расстояние от начала координат z-плоскости до объекта просмотра. Чем меньше значение, тем более выражен 3D-эффект.
Пример: perspective(500px).
Ключевые слова
none
Значение: none.
inherit
Значение: inherit.
initial
Значение: initial.
unset
Значение: unset.
Несколько значений
Любое количество значений преобразования можно объединить, разделив их пробелами.
Пример: rotate(-45deg) skew(20deg, 40deg) scale(2)
Каждое значение будет применяться одно за другим, в обратном порядке. scale(2,1) rotate(45deg) например, будет поворачиваться, а затем масштабироваться. Следовательно, это не то же самое, что rotate(45deg) scale(2,1).
skew(20deg, 40deg) например, это не то же самое, что skewX(20deg) skewY(40deg). Первое действует на обе оси x и y одновременно, тогда как второе сначала воздействует на ось x, а затем перемещает ось y.
Аналогично, matrix() это не то же самое, что указывать другие значения отдельно.
Пример
#puddle {
width: 200px;
height: 200px;
transform: rotate(-10deg);
}
/* Прямоугольник размером 200 на 200 пикселей, повернутый на 10 градусов против часовой стрелки. */
#pond {
width: 200px;
height: 100px;
transform: translate(20px, -10px) scale(1,2);
}
/* Прямоугольник размером 200 на 100 пикселей растянулся вдвое по высоте (сделав его 200 пикселей и, что важно, удвоив высоту содержимого прямоугольника), затем сдвинулся на 20 пикселей вправо и на 10 пикселей вверх. */Страницы в тему:
- Свойство CSS: transform-origin
Все свойства CSS
all background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-shadow caption-side clear clip color content counter-increment counter-reset cursor direction display empty-cells float font font-family font-size font-size-adjust font-stretch font-style font-synthesis font-variant font-weight height left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width min-height min-width opacity orphans outline outline-color outline-style outline-width overflow padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside position quotes right table-layout text-align text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-transform top transform transform-origin transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space widows width word-spacing z-index
