Функции Transform

2D

translateX(10px) - сдвиг по оси X. Значения в пикселях или процентах.

translateY(10px) - сдвиг по оси Y.

translate(25px, 30%) - сдвиг по осям X и Y. Если задано одно значение, оно используется как сдвиг по X, второе значение при этом равно 0.

scaleX(2) - масштабирование по оси X. При этом 1 - это 100%.

scaleY(2) - масштабирование по оси Y.

scale(.5, 2) - масштабирование по осям X и Y. Если второе значение не задано, оно будет равно первому.

rotate(10deg) - поворот на заданный угол. Значения задаются в градусах (deg). Центр поворота определяется свойством transform-origin.

skewX(20deg) - наклон по оси X. Значения задаются в градусах (deg).

skewY(20deg) - наклон по оси Y.

skew(5deg, -20deg) - наклон по осям X и Y. Если задано одно значение, второе будет равно 0.

Примеры трансформаций:

matrix(w, sky, skx, h, mx, my)

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

Значения:

w - изменение ширины. 1 - исходная ширина.

sky - наклон по вертикали. 0 - без наклона.

skx - наклон по горизонтали. 0 - без наклона.

h - изменение высоты. 1 - исходная высота.

mx - сдвиг по горизонтали.

my - сдвиг по вертикали.

Исходный код для элемента без трансформации:

transform: matrix(1, 0, 0, 1, 0, 0);

Примеры матричных трансформаций:

transform: matrix(-.01,0,0,-.01,0,-125);

3D

translateX(20px), translateY(15px), translateZ(-10px) - сдвиг элемента по одной из осей.

translate3d(20px, 15px, -10px) - сдвиг элемента по трем осям сразу. Последовательность значений: X, Y, Z.

scaleX(2.5), scaleY(.4), scaleZ(1.7) - изменение масштаба по одной из осей.

scale3d(2.5, .4, 1.7) - изменение масштаба по трем осям сразу.

rotateX(30deg) или rotate3d(1, 0, 0, 30deg) - поворот по оси X.

rotateY(40deg) или rotate3d(0, 1, 0, 40deg) - поворот по оси Y.

rotateZ(50deg) или rotate3d(0, 0, 1, 50deg) - поворот по оси Z.

rotate3d(1, 1, 1, 90deg) - поворот по всем осям.

perspective(100px) - определяет глубину сцены. Чем меньше значение, тем больше вытянута сцена по отношению к зрителю.

matrix3d(num, num, num, num,
         num, num, num, num,
         num, num, num, num,
         num, num, num, num)

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

Ссылки по теме matrix3d():
w3.org/TR/css3-transforms/#mathematical-description
eleqtriq.com/2010/05/css-3d-matrix-transformations/
developer.mozilla.org/en-US/docs/Web/CSS/transform-function
К статьям:
Transform
3D cube
Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.
Система комментирования от Disqus