The transform is the property name and the translate is the value you apply to it. It’s as if you said what does position and absolute have to do with each other. One is the property and one is the value. they will do nothing on their own.
The [transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS.
that will move the element 20px along the X axis and 40px down the Y axis. It will not change the flow of the document and that means the element may overlap anything in the way. The rest of the page is drawn as though the element was never moved.
Note that all values need to applied at once if needed.