Разница между CSS-функциями rotate и translate для трансформации элементов заключается в их назначении:

• Rotate используется для поворота элемента вокруг его центра на заданный угол. 34 Отрицательные значения от -1deg до -360deg поворачивают элемент против часовой стрелки, положительные — по часовой стрелке. 1
• Translate применяется для перемещения элемента по оси X и/или Y относительно его обычного положения. 14 Если нужно сдвинуть элемент влево или вверх, то нужно использовать отрицательные значения. 1

Таким образом, rotate отвечает за вращение элемента, а translate — за его перемещение.