Существуют 2D-трансформации на плоскости и 3D-трансформации в пространстве в CSS. 2

Некоторые типы трансформаций:

2D-трансформации: 25

• Translate() — сдвигает элемент на плоскости вдоль осей X и Y. 2 Есть варианты: translateX() — вдоль оси X, translateY() — вдоль оси Y, translateZ() — вдоль оси Z. 2
• Scale() — масштабирует элемент на плоскости. 2 Есть варианты: scaleX() — вдоль оси X, scaleY() — вдоль оси Y, scaleZ() — вдоль оси Z, scale3d() — в трёхмерном пространстве. 2
• Rotate() — поворачивает элемент на требуемый угол на плоскости относительно точки трансформации, которая задаётся свойством transform-origin. 2 Есть варианты: rotateX() — относительно оси X, rotateY() — относительно оси Y, rotateZ() — относительно оси Z, rotate3d() — в трёхмерном пространстве. 2
• Skew() — наклоняет элемент на заданный угол на плоскости. 2 Есть варианты: skewX() — вдоль оси X, skewY() — вдоль оси Y. 2

3D-трансформации: 24

• Matrix() — задаёт двумерную матрицу преобразований, объединяя несколько функций в одной. 2
• Matrix3d() — задаёт трёхмерную матрицу преобразований. 2
• Perspective() — задаёт перспективу (глубину сцены), расстояние от зрителя до элемента. 4

Функции трансформаций можно комбинировать для создания сложных эффектов. 4