☄️ 헷갈리는 transform 정리

translate

The translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a data type.

syntax

/ Single values /
transform: translate(200px);
transform: translate(50%);

👉 The ordinate (vertical, y-coordinate) of the translating vector will be set to 0. For example, translate(2px) is equivalent to translate(2px, 0)

/ Double values /
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);

https://developer.mozilla.org/ko/docs/Web/CSS/transform
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate()