Разница между функциями rotate() и rotateX() в CSS заключается в том, что они выполняют разные действия:

• rotate() поворачивает элемент в двумерном пространстве на заданный угол относительно точки трансформации, задаваемой свойством transform-origin. 25 Положительное значение поворачивает элемент по часовой стрелке, отрицательное — против. 15
• rotateX() поворачивает элемент вокруг оси X в трёхмерном пространстве на заданный угол. 15 Если значение положительное, элемент поворачивается по часовой стрелке, если отрицательное — против часовой. 5

Таким образом, rotate() вращает элемент в целом, а rotateX() — вокруг определённой оси (в данном случае вокруг оси X). 34