Функции 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.
Примеры трансформаций:
See the Pen CSS Transforms by yoksel (@yoksel) on CodePen.
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);
Значения матрицы мне не удалось выяснить до конца, кроме того, что первые три значения нижнего ряда отвечают за центр трансформации, а весь последний столбец - за перспективу. Причем первые три за перспективы по конкретным осям, а последняя - общая.